Search
Search Code
php error feed errors: XML or PCRE extensions not loaded!
1. Install/Enable the PHP XML Extension: Linux (Debian/Ubuntu): Open your terminal and run: Code ..
check connetions in linux every 10 seconds loop
just add this to a sh file and it will show the connections every 10 seconds. e.g. ./checkconns.sh354351325313303390386350365300364282263208271408338320
PHP FIX Fatal error: Uncaught Error: Call to undefined function curl_init()
Caused by Missing Curl Extention. sudo apt-get install php-curl restart nginx sudo service nginx restart
Fatal error: Uncaught Error: Call to undefined function mb_strlen()
this wasted an hour!!! grr sudo apt install php7.4-mbstring causes an error for php lite admin where it just displays blank
SQLite - load a game from games, that has not been processed - AI
Im just going add some of these here as they might be useful in the future. Request: Can you write a sqlite query to select the latest game from this table using insdate as the datetime structure ..
check and block connections script
a safe diagnostic script that helps you check and analyze the connections. ⚠️ Why Automatic Blocking is a Bad Idea You could lock yourself out: An automated script ..
block ip address ranges on ubuntu linux with UFW
sudo ufw deny from 203.0.113.0/24
Content Editable
content editable tags with also making the style sheet editable as well as block if i dont target the style by an ID then it just makes all style tags on the page as display block which is a bit anno..
matrix test video no sound mp4
Link https://i.imgur.com/uotAQao.mp4 Preview
CSS 4 box custom grid row - New Version - July 2025
I fixed this one a little bit so that the boxes actually fit within the element width, as before they were kinda sticking out abit too much. Old Version.
override the hero image background on this page
this is just cos im lazy and want to override the image here ^^^
Striped Background Gradients in CSS + HTML
Testing out Stacked Linear Gradient background to create striped gradients in CSS and HTML.
Changing the Background in CSS
Some of the properties of using a CSS background on a div, how to set the background color, opacity and also using an image as a background with CSS. ⌚Timestamps🏹 0:15 CSS Backgroun..
sticky table headers
nice looking tables that have sticky headers, credits in link below. seems to be all css as well, nice! commented out the global stuff
modal no libs just js and css
modal with no js libs just css html and a bit of js... yay?
Making an image responsive using css using background cover
the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..
change slick slides to adaptive height
just a code snippit at the moment need to add a working example here
Locate a DIV and CLASS and create an IMAGE element using JAVASCRIPT
I had this weird request the other day, well today to replace an image thumbnail that was generated by an aspx script, but the link was from youtube and the list was not auto loading the thumbnail.&nb..
🔗How to add a Link in HTML?
How to add a link in your HTML and other random things about html links!
Create a React App with Vite and TypeScript on Windows
This assumes that you already have the latest node installed, i had some issues as i had an old version installed and had to manually delete it. You can check the version of node by typing node..
custom modal nice and easy
a nice and simple modal custom made
reload window automatically with javascript
script to reload the window automatically the same as pressing the reload button on the browser so there may still be cache issues when reloading this you can change the 5000 to another value to chan..
HTML how to add an IMAGE! Quick HTML Tutorial
Just doing a bit of a series on HTML basics, i will list them here as i add them. We upload an image to imgur, and i show how to get the image link and insert it into html to show it! Super basic a..
HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial
How to center text in html, there is a few options i discuss here and probably more that i missed out. Codepen: https://codepen.io/kruxor/pen/poMOVYe
disable recall on windows 11
Apparently this can recall what you type??... Open up the Terminal (as Admin) and type in this command WIN+X Dism /Online /Get-Featureinfo /Featurename:Recall
Quick Embed - Google Font - DM Sans
DM Sans font quick embed and css class
show all connections on linux command line
the ss command will show all connections
php redirect
quick and simple php redirect to a url
Bind 'this' to a Class Method
Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..
Disable the ACF Warning message in wordpress dashboard
add code to functions.php
rotate an element when its selected
add and remove the class open to rotate
extract a wordpress menu using its id
when you edit the menu in wordpress you can check the url, and it will have the id to extract in the following string: /wp-admin/nav-menus.php?menu=12
Left Fixed nav with right fluid content
left fixed nav section with right fluid section css and html using flexbox
add a page template in a wordpress theme
duplicate the page.php to a new php file usually with the template name as the file name with no spaces file in wordpress theme and add the following line to the top.
find a custom data attribute in simple html dom
locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs
jqueryui date selector with examples and code with custom date formatting
Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector
CSS Object Fit for Image fill rather than using background image on a div
CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size. Object Fit You can use: object-fit: With the following ..
flip card animation 3d front and back css html
3d flipping card with front and back content and animation
six box grid css html custom no gap
re-usable four box grid with no gap, plus stack on responsive 1024px
four box grid css html custom
re-usable four box grid with gap calculations
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
4 box custom grid css layout stack on mobile 1024 lower
4 box css grid that stacks on 1024 and lower res displays. Here is a demo of the code
How to Enable Linux Subsystem in Windows
Enabling the linux subsystem in windows allows you to use linux within windows. To enable linux sub system in windows you can do the following. In the start menu type "Windows features..
font awesome spinner loader loading spinner
just a simple font awesome spinner to use for loading areas
Quick Embed code for Titillium Web Google Font
Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic thes..
Quick Embed Figtree Font
Quick embed code and test paragraph for the google font figtree
Using the HTML tag details for easy accordions
Using the HTML Tag ` ` for automatic accordions.
wordpress jquery find and replace option text value
renames the Select Category in the option value 1 to Topics add to the footer, uses jQuery rather than $ but you can just switch to $ if not using the wordpress jquery init.
Video different sources on screen sizes video embed html responsive
video embed tag using media tag to switch video sources depending on screen size This example will switch the video souce at 800px screen width.
wordpress block grid code
the basic wordpress grid column layout this is a 3 col layout
display a subnav for the current wordpress page
good if you are doing custom page work and need to show the current sub nav somewhere other than the main menu.
select something with custom data attribute css
selecting something by its custom data attribute and value in css
fancybox youtube showing video links in a lightbox - updated with fixed code parts
do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fanc..
make clickable element with clickable class open link in new window
makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..
Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in simple_html_dom.php on line 722
Initial thought on this error is that there is a version issue. This only happened on version 1.11 for me, will check what other version i have. Yep not sure why but the older version of php ht..
function causing slow load time
i had this function matching a uid using a binary select query. The sites were loading in about 8 full seconds according to my load timer, sometimes up to 12 seconds! So this was running on old site ..
error Warning: getimagesize(uploads/583517f49099a.jpg): failed to open stream: No such file or directory in SimpleImage.php on line 1198
i think this error is just caused by a missing file. But there should be some kind of error checking here to not crash the whole site just due to a missing image file. this error is quite hard to fin..
Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated
I had this error on a function that i was not even sure i was calling. This was on some old code i was testing for an old site, i must have fixed this error on a never version of the function. ..
getcwd usage in php to get the current working directory for file includes
the builtin function getcwd in php gets the current working directory, this can then be used to include files or check the current working directory rather than manually adding the directory into your..
chart js line chart dont show below 0 and add axis labels
Now we take the chart js chart and add some axis labels on x and y using the same options values. This will also add axis labels to the chart on the x and y axis Javascript options: { scales: {..
chart js line chart dont show below 0
had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue. Javascript options: { scales..
table scroll responsive foundation
add this div wrapping your table using the foundation framework and it will allow the table to scroll on smaller screen's. Making a responsive table easier.
Boots Widget change from widget to cat head and click function
Moving this from the widget area to the bottom, to make it less obvious but still there if needed.
Windows CIFS Optional Features Network
Some of the file sharing between windows pc's seem to need this feature. Also NFS is needed for some older NAS systems.
Quick Embed - Google Font - Fira Sans
fira sans font quick embed and css class
Slick slider code testing with slower slides and auto play on videos
additional testing with changes for slick slider videos and auto play
Chat GPT slick slider code testing
slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..
Quick Embed - Google Font - Inter
Quick Embed code for google font inter
Check free space amount and show it in a nice human readable format
this checks the disk space amount on the linux macine and returns the result in human readable form. df -H Usually this will show it in the following format. Example below.
Fancybox Quick Video Modal Popup Code Inline
have you ever needed to add a quick video modal using fancybox. Probably not, but if you do, here is the code.
chocolatey command line for windows
i keep forgetting what this is called but its like a command line installer for useful windows tools like ffmpeg and other useful packages. Its like a simple package manager for windows. How ..
add ssh keys on your linux box in 10 seconds
Here i was typing in the ssh password over and over when connecting to ssh, when i could have just typed this one command and had my ssh keys copied to my linux box! What was i doing all that time! :..
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
how to show your DNS in windows and then copy it to the clipboard in one command
Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting. Open Windows Command Prompt<windows key> + R Type cmd ..
pulse map dots
bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below. modified from here: e.g:
slick slider section quick add
everything you need for a quick slide section
find a text string and replace it in javascript
There is a function in javascript called replace. You can just give it some text and it should replace it with your target text. For example #1 this just runs and replaces the first instance o..
four box section template in foundation with classes find and replace (4 box)
this section uses the large-auto classes so you can add or remove boxes easily. find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..
check if an item id exists in javascript
checks if 2 ids exist in one function and console logs the status here is the result in console log
Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code
According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same. All Style..
return author title from simplepie rss atom feed
i was just returning the author from this, and for some reason it returns a number. $class->$target_item = $item->get_author(); where you also need to pass the get_name function to this to ext..
imgur upload from php
function that takes an image and uploads it to imgur using a client api id, and then returns all the data. i did this one ages ago and did not make it into a function, but this version should work as..
simple pie get link from enclosure item in simplepie rss feed
i had an item like this in a rss feed, and i wanted to grab the enclosure url, took me a while to figure this out for some reason even though the solution is quite simple. PHP <item> &l..
simplepie error : XML or PCRE extensions not loaded!
using simplepie it does not load the target feed, and does not display any errors. Just nothing. if your feed is init'd with $feed check for feed errors with: $feed ..
four box responsive section with all classes find and replace boxsection title foundation grid (4 box)
four box responsive grid, find and replace the word... boxsection with your new section name to generate all class names and section names to match for rapid section creation. Demo Codepen
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
loading a non processed item using the load_from_fields_array function
Example using the load_from_fields_array function to load a single item where the processed value is equal to FALSE.
simple file cache and check in php
just a quick cache bit of code, may need tweaking to actually work... i just added it here as i thought it was re-usable. Also requires simple_html_dom library.
font quick embed inter all styles google font
For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..
How to switch desktops in windows 11 with keyboard
this is just a quick one as i could not see the option, which you would think they would add to the new desktop switching screen.. Anyway here is how you can switch desktops in windows 11 and create n..
Add font awesome icons as placeholder text in inputs
An old one i found on codepen, works with only the old version of font awesome i think. Not tested on the later versions.
two box responsive section with all classes find and replace boxsection title foundation grid (2 box)
easy copy and paste section and find replace the word boxsection with your new class names, using foundation grid.
basic section item with foundation wrap and grid - single item in section
section with inner and outer css selectors for reuse and basic layout formatting. you can then search for "section-name" and replace it with your own section name. section-name section-name..
Video Placeholder Image HTML
a quick image embed for a common video placeholder image size made by this amazing placeholder site
wrap an iframe with another div inside another div
so lets say you had an iframe within another div and that div had the class called content. you cant actually edit the page content but you can add some jquery to the page can you add a wrapper to t..
Random User Profile Loading Script in vue
uses the random user ui here to generate profile boxes using vue js original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher
A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.
Map Image with Easy Dots and Titles using only CSS
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
CSS Filter Generator from Hex Code Usage Example
quick example of how to apply a css filter to change logo or image color using this tool
Regex replace or find anything in brackets
Search for anything within brackets ( find this ) and the bracket its self. REGEX \((.*?)\)
Quick Embed Import and Code Samples for Google Font Roboto
quick embed codes and code examples for the google font Roboto. Roboto Font Preview
rainbow text background clip with linear gradient
testing using background clip with a linear gradient background colour to make the text appear rainbow colours 🌈
codemirror with auto preview window
this should auto preview html code into the preview area using code mirror
Oswald Font Quick Embed
Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..
using figcaption and figure for your images
So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..
encode spaces in items passed to url to %20 not +
I was using urlencode in php and it was encoding words with spaces into word+space rather than word%20space This can be resolved by using the function rawurlencode rather than urlencode.
Load fancybox modal on hash check
I was just testing this code, not working on the hash check as yet.
php validate email function
php function that can be used to validate an email address string
redirect www to non www
usually i point the www to the ip address of the server and then create a redirect block on nginx, but this seems like extra work for nothing. Tested the cname point to the address but this see..
Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle. This version seems to work, with a jquery slide toggle.
php function load as table - load_as_table
Load data and add into a table format by passing in the required fields as an array. Example Result Live Example https://kruxor.com/view/nz_postcodes/5KrBW/zurich-place-weymouth-manukau/&nb..
Quicksand font quick install
Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both.
Playfair Display Font Quick Embed - Google Font Quick Embed
Note: you only need the @import in css or the link href not both to embed this font. This font reminds me a bit of Times New Roman
add a custom event trigger in jquery document ready
i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..
get json with php from a url and display it
yep its that easy. this code shows getting the contents from a json request api. var dumping all of the results and extracting one single item by its array key and showing it.
fancybox inline auto size modal easy
It seems weird to me that the examples on here, do not have code linked to them, and rather i have to dig through the source and find how they work.
a google font like muli - mulish and embed code
mulish font embed codes and styles with example
content-visibility and contain-intrinsic-size for page load rendering speed increase
interested to see if this makes any difference content-visibility The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcin..
php convert number with k on the end to full number
I have a function that converts raw numbers into shorthand or human readable numbers, but was wondering how to convert these back if they are stored in that format, and also makes it better if you are..
basic radio checklist - check and item and get its value in a textarea
a basic radio input type checklist, where you can only select one of the items in the list. Ok so no longer so basic. This script allows you to fil the value of a text area with the valu..
Invalid argument supplied for foreach()
Fix for Warning: Invalid argument supplied for foreach() in /var/www/html/pages/seo-meta-tag-search.page.php on line 204 As this is just a warning, i may not have noticed it originall..
Warning: file_put_contents(/var/www/html/bundle/responsive-viewport-meta-tag-responsive-meta-tag/index.php): failed to open stream: Permission denied in /var/www/html/pages/update.page.php on line 167
i think that the content in this location is not writable by php so need to change the permissions too fix this error. This should fix it, as it was not correctly write permissioned Bash cs /..
Warning: Undefined variable $class_single_hero in /var/www/html/pages/section.page.php on line 177
This warning was caused by a dot in front of the equals $class_single_hero .= $code->hero_widget($t_uid = $class_single->uid,$t_class = $p2); Fixed version Easiest way to fix this is remo..
Search Duplicating Bugs
Still having issues with the word above duplicating, not sure why. Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..
flush dns on mac
sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder
add a user and add the user to sudo group
basic adding of a user in linux and then adding the user to the sudo group to allow it to run super user commands like apt update or other potentially system breaking commands. Note: replace "usern..
set a css grid to auto to make it stack on mobile
to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size. In this example once the screen size gets to 1024px or les..
duplicate a line in vscode shortcut
if you ever wanted to duplicate a line in vscode, this is the shortcut for you. rather than doing the hightlight, and then CTRL + C and then CTRL + V you can use the following shortcut. just put you..
jquery load wait function
load something in jquery, wait for it to load then do something else
unable to write to a sqlite database with docker
turns out this was not a docker specific problem, i was getting the readonly database error. even if the database has full write permissions, the directory also needs to have write permissions ..
add user to sudo group in ubuntu
Adds the user "username" to the sudo group usermod -aG sudo username
share to twitter javascript button function open a new window
gets and encodes the current page url and opens a new window to share the link to twitter
share to linked in current url button with javascript
Share the current page url to linked in with a button and javascript
linked in share link html only, linkedin, linked-in
share a post or url to linked in html only version
Get current URL and add a share to facebook share button with it
Combines this Facebook HTML for Sharing a Link and encode url with javascript this to make captan planet! Or... makes a share this post to facebook button.
encode url with javascript
get the current url, encode it and log the encoded result to console
Clear Youtube DL Cache to fix 403 Forbidden error, youtube-dl 403 forbidden
If you are getting the error: File "C:\Python\Python34\lib\urllib\request.py", line 588, in http_error_defaulturllib.error.HTTPError: HTTP Error 403: Forbidden It could be cache that is causing this..
using the :user-valid CSS pseudo-class
It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.
add a button to an existing link using :after css
Adding a button style to an existing link using :after and css. Preview
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average... Lets fix it! Some simple changes Just a few elements added and moved around a bit. Added another row to the f..
bouncing loader animation in css
uses css and keyframes animation to create a nice and smooth bouncing loader
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
center a box in the middle of the screen
and then center everything in that box as well
javascript add class to element
how to add a class to an element in raw javascript I wrote a quick demo here showing how you can add a class to an element with an id on a button click
update value of element using javascript
using innerHTML to update the value of an element
No 'Access-Control-Allow-Origin' header is present on the requested resource.
add this to your php to allow requests from any source Access-Control-Allow-Origin php header
javascript attach a click event to an id not using jquery
I just wanted to bind a click to a button, not using JQuery, turns out its not that hard at all. Why am i using jquery for this stuff???...
console dir usage
the console.dir function shows a list of the properties or the target object. Usage console.dir(variable); Result Example
test love like dislike script from api
just testing writing to page from javascript and api
Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links
Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them. I wanted to extract the top searches and the latest searches by da..
Fatal error: Uncaught Exception: Required extension GD is not loaded.
How to resolve the error: Fatal error: Uncaught Exception: Required extension GD is not loaded. This Error is ususally due to a php library or script requiring the GD php extention. On ubuntu ..
Regions of New Zealand - In Dropdown Form
Split into north and south island lists Also added a combined list, with a disabled options for north and south. /your welcome! :)
generate view statistics widget in php class extend
How i generate the Week, Month and Year view statistics widget for this site. Views Widget Function This generates the widget based on the views data. PHP // views widget /* using fi..
svg animated line testing - shooting star right
I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below. There is shoot right and also shoot left, if you are that way i..
Uncaught Error: Call to undefined function mb_convert_encoding()
I was getting this error when calling a function in the readability php class, on a new server for code that worked on the old server. Uncaught Error: Call to undefined function mb_convert_encoding()..
Using Marker to add a Triangle to List Items
In this demo i use the ::marker attribute on the list items to change the content of the marker to a ▶
Auto Create HTML Code Snippets
make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..
get the subdomain name from the domain string in php - sub domain
returns the first part of a domain string, for example moo.kruxor.com will return moo
Slick Slider Showing Multiple Items at a time
Just wanted to test some review type items showing more than one on slick, Seems to work well. This shows two items at a time, but you can show as many as you like. Could be good for a testimo..
add a toggle with jquery and change the class
With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off. Here is t..
chevron right thick and pointy edges base64
finally found a svg chevron that does not cost $3, amazing...
Testing Playwrite on for Node
I came across this library on y news, and thought id give it a bit of a test. I managed to get it working but not really sure what tests it can do. I set it to take a screen shot of a we..
add an outline to everything!
very handy for checking elements and other things on your page. this one line will add an outline to every element, so you can see where all the elements are located.
content editable p tag with spell check enabled
im not sure how this is useful, but you can set a p element to content editable so you can change its contents and then also set the spellcheck to true so the browser knows that it should run its spel..
card.html template
a card template with title, content and a mb-3 for bottom margin for usage with the php template system.
function to delete older sqlite records when the limit is reached
I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..
fixing error Call to undefined function simplexml_load_string
usually the error "Call to undefined function simplexml_load_string" happens when the php xml library is missing from your server. You can install the xml php library with the following command, repl..
get directions from google maps form embed
this is a random form that posts back to google maps showing the directions needed to get from one address to another location, im not sure where this would be usefull. Maybe on a site where you neede..
center image preview with lightbox and caption
I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it. Note: I just picked ra..
get tomorrows date with javascript
Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));
get yesterdays date with javascript
This gets todays date and minuses one day from it to be ... yesterday. let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..
hide the first h3 tag on the page with css
in case you want to target the first item on a page and hide it or change it with css.
make a nice readable date using a timestamp string function make_nice_date
handy if you have a timestamp like this: 2022-01-10 00:12:42 and want it to look a bit nicer. like this... 12:19 am, January 10, 2022
add new random image with button
this appends a new random image from picsum.photos to the div with the id app
get the content of a url get the content of a link with php and test if the result is empty
Where $import_url is the target URL.
extract meta attributes with simple html dom
pass in the url as import_url and it will search for the meta keywords tag and echo the result.
php check if url is valid with filter_var
check if url is valid using filter_var and return a message if the url is invalid rather than continuing
Common and Uncommon Meta Tag's and Social Meta Tags
I am writing an api that checks for meta tags so i thought i would add a list here of some of the common meta tag names that i found. The ones prefixed with og: are facebook and linked in and s..
Darkmode JS - Add darkmode to your site with one script
This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit. Darkmode JS Example Source Links https://darkmodejs.learn.un..
Use destructuring assignment within the argument to the function half to send only max and min inside the function.
this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
Using Destructuring and the Rest Parameter to Reassign Array Elements
Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the firs..
Use destructuring assignment to swap the values of a and b
Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a. I was havi..
Hello world in C and seeing what it is actually doing
One of the most simple C applications, how to compile it and how to objdump it. C #include int main() { int i; for(i=0;i < 10; i++) { puts("Hello Mac\n"); } return ..
How to download music to mp3 format from youtube using youtube-dl
How to download ABGT from youtube. youtube-dl sudo apt install python3-pip ffmpeg brew install ffmpeg brew install youtube-dl Getting this error: The operation couldn’t be completed. Un..
Sweet Alert 2 Methods and Examples
I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..
Using CSS Grid instead of Float's for a 3 column simple list
I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually. But i thought i probably should update the defaults in by ..
Slick Slider Carousel with Custom Next and Prev Buttons
I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider. Note the class names: sli..
Input Suggestions using a datalist
I found this cool piece of code here, looks very handy. Basically you can add the input and then provide it a data list with suggestions, which then will allow you to start typing the item and it wil..
get php to validate its self with php check syntax
Did you know that php has a syntax checking function built into it? Well it does and this is how you can use it to check your php files for errors, rather than just running them and hoping for the be..
Console Tips and Tricks
Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..
how to copy the folder path in finder
Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
Add custom symbol to ul li list and align text items
Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items. If the list items dont align correctly you will nee..
php export csv from string to browser download
exports an array to a csv string and returns the result in the browser
how to embed google fonts icons
For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..
how to decode xml in php
how to decode xml into an array in php Here is a full example taking an xml string and converting it into a php array.
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
count total results from distinct sqlite
a query to count the total items found on a distinct query
php get file and save it
gets a file from a url and saves it to your local server
javascript random string to put on url for cache
I was having a bit of a cache issue with a external css file, so i thought i might fix this by appending a random query string to the file name. This should force the browser to recheck the file each ..
add every value in the load_array array into the out for testing
quick foreach to add every variable and variable name into out and return it. good for testing.
load json data url or api with javascript
this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console.
load json data url with jquery
loads a api or json url or endpoint using jquery and console logs the result Tested working on my test json file, check the console and it should be there.
php return json header and content
sets the header to json and returns a simple json formatted array.
php post data back to a url with a function
this function uses curl to post back data to a url, this acts like a _POST form request from within a function. Function usage: $url the url to post the data back to e.g: $url = "https://kruxor.co..
add a divider to your dropdown nav toggles
good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>
generate random username function in php
a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..
validate email address from string with jquery working function
Here is a working example of this post validate email address from string. This has very basic checking of an email address by checking that the string has an @ and a . in it. Note: this is still no..
How to Use PropTypes to Define Props in React
React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element. To do this you can define propTypes. You can defin..
How to Override Default Props in React
The following code explains how you can override the default props in react. In this example the default of quantity is set to 0, so we can pass in quantity in the items to override its default..
log the console log output to a div
I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code. I had to modify this a b..
javascript basic test array and loop
Here is just a basic test array and a loop to show a basic loop through the test array. With the loop i use the length of the array as the max variable, so the loop stops when it hits the array..
add hero title to category listing page [not done]
add the hero title and background to the category listing page as a page title or category header. e.g: https://kruxor.com/category/code/react/
How to use default props in React
If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component. This can be a..
how to join an array in javascript using the join method
This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..
replace singular variable assignment with an array loop and variable variables
I found this useful when passing in an array to a function, rather than assigning all the variables in the function manually from the array just loop through each item in the array and asign them that..
category listing not working on categories with spaces [not fixed]
for some reason the site bugs category and potentially other categories that have spaces in their names are not listing properly. Test URL: https://kruxor.com/category/code/site+bugs/ Probab..
show the current date in javascript
Returns the current date and time and sets the value in a div. Also added a demo with setinterval to update the time and date in the div every second.
How to Render a React Class Component to the DOM
This shows how you can get react to render a component into the page or DOM. So actually getting and showing the code that you have been writing in react.
get element by id and hide it
This example gets an element by its id and hides it by setting the css style value to display none
get element by id with javascript
gets an element using its id using javascript
set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day. The cookie in this example is set to expire in a day, so then if you com..
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
Changing the default hero image based on the category name [not yet done]
This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..
How to Use React to Render Nested Components
It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..
using css counter-increment to add numbering to elements
i just found this element in css where you can add numbering to elements, very handy to add counters and things. This uses the counter-increment: section; in the main element and then adds the ..
using the kbd html tag
You can use the tag <kbd> to highlight keyboard shortcuts, i love this tag! Now i just need a reason to use it.
How to Create a React Component using the ES6 class method
One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..
foundation base html template - foundation template
just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.
How do Self-Closing JSX Tags Work?
So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..
How to Define a HTML Class in JSX in React
When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..
How to Render HTML Elements to the DOM with React
Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode), In this example we are targeting the div with the id challenge-node. JSX ..
How to Add Comments in JSX
To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text. You do actually need the curley brackets, and have to add it under the other elements for this to wor..
adding react with JSX using babel
just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react. This is apparently not a good way to do things and can be qui..
adding react to a website in 3 steps
i was just researching how to add react to a website, and i thought i would need babel to translate or compile the JSX code, but apparently you do not need this... So ill test this here and see..
react hello world with time and date updating
here is a react hello world with the date and time updating on setInterval 1000 miliseconds. Again with react it has to be compiled from JSX for it to work, so i have included the original and ..
react hello world with variable name
i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..
react basic hello world
the most basic hello world using react js
console table rather than console log for javascript objects and arrays
so i just saw on a tweet, that you can use console.table and i cant wait to try it out! good thing i already have a test object and array ready to go!
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
bootstrap list group card with footer
a list group within a card and also a footer on the card for additional links.
list group card item template
this is a list group item for usage with the template list group or list group card template.
list group card template
list group card template for usage with the php template class
views list function for checking what views have been made on the current week
this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..
load array load all items from an array while in a sqlite load sql loop
i find this useful when loading a bunch of items in a class while looping through data, rather than assigning variables manually i just add the array of item names into the class to begin with and the..
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag. Loading the fonts Gist : not tested https://gist.github.com..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
stackable bio or biography list with portrait image title and text
a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. As its in foundation here is ..
open sans @import embed font quick
just a quick and nasty css import for the Open Sans google font.
using strlen to check the length of a string and do something about it
in the following code i use the php function strlen to check the length of a string and then add an if statement to check if the string is longer or shorter than the required length.
using wp_nav_menu to show a custom menu in wordpress
found this quick code snippit here, its not working just for reference of what the array items do. Here is how you would display the menu called "Projects" PHP $..
get and show the featured image on a wordpress page template
this will extract the featured image on wordpress page if you are using custom page templates.
document placeholder for a4 in portrait
a nice document placeholder image with dropshadow and transparency
landscape image document placeholder
A nice landscape image of a blank presentation format, in landscape mode with drop shadow.
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
link to a custom style sheet in your theme directory wordpress
this is how you can include a manual link in your wordpress header file with a link to a stylesheet called theme.css then if you change theme names or something it will still link correctly, rather t..
wordpress show page content on template file
shows the page content on a wordpress template file
show post content on template wordpress
show the post content on a wordpress template
wordpress add a template file to your theme
this is the basic layout of adding a wordpress template php file to your wordpress theme. good for custom theme pages This is a really basic template with just the header, but once added wordpress w..
hidden scroll anchor for custom scroll position
just incase you need to link to a scroll anchor that is not in the place where you need it.
down chevron and styles
a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
load from fields array php class function
this class function loads from multiple fields from an array, much easier than passing in a bunch of variables into a function nice and clean, the only issue is you need to remember what fields to add..
using a radial gradient for background overlay
usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..
change selected color on input elements css
this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..
easy section wrap in foundation
i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section
test image url that always changes unsplash placeholder
good if you are doing a test site and need some changing images for test placeholders, and they are nice looking images as well. you can just use this image tag link and specify the size required.&nb..
video not auto playing issue in chrome and brave
i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..
change the box-shadow of an element with javascript boxShadow
changes the box shadow of test_div using the javascript object(?) boxShadow
change the background color of an element with javascript
gets the element by its id and changes the background color style css value the following example: gets the element by its id "my_bg" changes the style.backgroundColor to #123456
adding a new line in javascript
i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..
javascript update item in object
find something in a javascript array by its array id and then update the value of that item i changed this from an array to an object as i wanted to use something other than numbers for the index Ob..
change padding of element with javascript
change the padding of an element with javascript only
get the value from a range input field with javascript
this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..
animated duck on footer
Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/ Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
atom on mac and synchronise settings
installing atom and syncronise settings between windows and mac versions. Install the package Syncronize Settings the package is called sync-settings but searching for sync-setting and Syncroniz..
fancybox load iframe inline
All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going.
using filter grayscale to make an image dark
lets make this image grayscale using a css filter
function to load one latest item with a start val load_latest_single_num
This is the same as load oldest item based on insdate then update the insdate to now - load_latest_single_update but it allows you to add a start number to the range, so allows you to access the 2nd, ..
moving the hits widget into the post header and footer
I wanted to make a smaller deal of the views page widget, i was adding it as a full widget and it does not need to be that huge so moving from widget area to the top of the post. Move it down..
creating embedded php code from a database field
i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..
test php bundle write
just testing
check if the file is a directory or check if the directory exists in php
this checks if the file is a directory or if the directory exists
get the current working directory in php
gets the current working directory... in php
create directory with php create folder with php
i thought i had already done this somewhere but i guess i didnt. Anyway here is how you can create a directory with PHP. PHP mkdir("directory_name") yep its that easy just make sure you are in the..
bootstrap dark mode
Bootstrap Darkmode https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1 https://github.com/vinorodrigues/bootstrap-dark CSS Dark Mode Preparing for dark mod..
how to bundle css files together using windows or mac
so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows. lets say i have these css files main.css style.css..
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
gallery carousel center mode
i found this one here, looks cool. see if i can get it working like the demo. currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
load random videos module using template
load 3 random items and extract the video url, and use the youtube function to create a thumbnail and link to that video page
PHP/SQLite - Load Random Item
loads a random item from the current class / db using sqlite.
add some foundation tabs working example
they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..
extract youtube image from video url
showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..
vertically align text within a fixed height div using flex
this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..
white space break word css
controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..
old browser check with javascript
modified from this script i console logged all the items available so you can do what you need with them these are the avilable variables Javascript console.log(browser.agent);console.log(browser...
check browser version and show a message
a button that displays your browser version in a modal Demo (gif)
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
CSS Drawing - Beach Scene
i did this one a while ago, cantr even remember it just appeared when i searched in google. here is an animated version, check the bottom for the css version of this:
404 Error Page Codepen
found this in my links the other day, still looks cool...
set the amount of lines to show in a textarea field
using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width
weird search results being recorded
i noticed some weird search results being recorded like this: the search function should only be recording a result if it finds a result, so this should not be added unless it can actually find thi..
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation more docs on this here: https://get.foundatio..
append a #link to the end of all href urls on a target
good for if you need to append target links with a # link
hide the third row in a table with css
just wondered how hard it is to hide the third column in a table with css, rather than deleting it in the html here is the test table cell 1a cell 2a cell 3a cell 4a cell 5a cell 1b ..
fix for wordpress requesting ftp login details installing plugins
add this to wp config define('FS_METHOD', 'direct');
simple backup to google drive fron linux
i added these scripts a while ago to backup mysql databases and web files to google drive a while ago, i just run them on a daily cron to copy the backups every day. the files so the bain backup_a..
scroll down the page using a button click
scrolling down 600px from where you currently are on the screen demo vid
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
add a gtag.js pdf click event
how to add a pdf click event using the gtag.js analytics
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
use a list group for listing by category page [todo]
change this to a list group, should make it neater. Page to update: https://kruxor.com/list-category/code/ so for some reason this is listed using this function PHP $list_wiki_menu = $clas..
Comments Listing should be a custom list rather than using search
For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..
ajax callback to delete with sweet alert confirmation to make it cool! 😎
I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..
load the latest single item only
this function loads the lastest item from the selected class
load oldest item based on insdate then update the insdate to now - load_latest_single_update
i keep finding these functions that i wrote ages ago and forgot about so ill list them here so maybe i can remember them. I think this one was to loop through items, so it grabs the oldest item and t..
hero widget header - creates a nice looking hero item from a target uid and class
this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..
dropdown section
What generates the dropdown widget items? generated by the function generate_section_button() per class template file section-dropdown-bootstrap.html
Latest from Code Widget
What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all( $start = 0, $max = 10, &n..
rtrim strip white space or strings from the end of a string
good for removing trailing , or any repeating character from the end of a string
prevent default click event on link
This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..
make your images look non squished when not using image backgrounds v2
this is a working version of this post, for some reason that image was deleted I think due to a content upgrade. Basically this uses the object-fit: cover; to make images not stretch when they ..
show the difference between two dates in years, months, days, hours and seconds
i modified this code into a function that also detects if there is any values in each item before adding it to the text.
counting the occurrence of words in a multidimensional array
array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..
target 1st td in a table with css
this css will allow you to target the 1st td in a table
backup script to google drive that can be used for multiple directories
this zips the content of the target directory and then uploads it to a google drive backup location just create a file called ~/_backup_dir.sh and then add the following BASH - _backup_dir.sh ..
backdrop-filter: blur(10px);
just testing this filter
load json with vanilla javascript no jquery
this basically does the same thing that a jquery .getJSON does but without the need for jquery.
json load from jquery and loop through the results
this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..
add chevrons to a ul list
Adding a chevron to a list item rather than the default dot and the moving one, here is the demo: Added a video for this one.
set active class based on url value
this will check the full url and then loop through all the a elements in #test-div when it finds a matching url it will add the class active to that button this is good for persisting active links o..
show all methods or functions in a class (class function version)
add this to your class to show all its methods including this one... sorts the array ascending by values so should be sorted in a-z
show all methods (functions) in a class
this will show all available methods or functions within a class, once they are in a class they are called methods for some reason. print functions, show all functions, methods in a class, show met..
adding an item to an array with php
how to add items to an array in php here is a working sandbox version of this code: sandbox.
check if a variable is undefined or NULL
this will check if the check1 variable is set if it undefined or NULL it will return
foundation accordion for version 6.x
yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions.
foundation responsive tables
in foundation you can make a table scroll when it hits its width limit by adding the class <div class="table-scroll"></div> wrapping the table element
allow a title to be in the foreground while still having a before overlay for the background
i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay. I found the fix was..
css responsive max and min targets @media
showing how you can target elements within a max and min screen width demo:
Remove background image php with image magic
untested research on removing background and making it transparent with php
validate an email address from a form field - version 2
This javascript function will check if the email address in the text box has an @ and a . in it and return a message saying if its valid or not. This is pretty basic as it only includes checkin..
check if a checkbox is checked with javascript
checks if the box is checked and returns true or false reusable function that can check if a checkbox is checked or not just pass it the id of the checkbox Javascript Usage check_my_box('check1');
form submit override with javascript
if you need to run some additional checks on a form before submitting it
dropdown change input box on select
changes the value of an hidden input depending on the selection of the dropdown
Slick Slider Carousel with Fade Transition
here is a working example of slick carousel with a fade transition between elements rather than a slide transition
pre-wrap preserve line spacing but also wrap where needed
a class to pre-wrap your line text this preserves line spacing but also wraps the text if the line goes out of its limit
add a toast alert when logging in with half moon
example of adding a document dom ready wait and then the script that launches a new toast message just adapting a php cms using halfmoon as the ui, its quite nice. a bit bright in non dark mod..
dont use md5 for password hashing using password_hash and password_verify
apparently md5 is not the best method for password hashing, you should use the php functions password_hash(); and then password_verify(); to verify the hash matches PHP password_hash..
clear a input field when it looses focus using onblur
this will cause the input field to clear when it is not in focus
python extract title tag from url and html using regex
this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..
python import and print url
here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..
commit and push changes to git repo
run this to add all files in current directory to repo and push the changes to git git add * git commit git push
start ssh and add key git
i usually add this to a .sh file and make it +x to run ssh agent and add the github key bash eval "$(ssh-agent -s)"ssh-add ~/.ssh/github
play youtube videos on firefox in ubuntu 18
sudo apt install libavcodec-extra also checked that firefox was able to pla drm video
css double page document preview with shadow
two div elements that look like blank documents with drop shadows
adding a background image to the titles of the dark mode card on this page
Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..
blur the background image while keeping the foreground normal
this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry
background image greyscale filter while foreground is still in colour
i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue
javascript page redirect
this one i cant add a working demo for, due to its nature, but it is working if you remove the comment. combine this with this: https://kruxor.com/view/code/wQUDM/do-something-later-with-settimeout-..
page scroll indicator research
I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..
zoom background of element when active
I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom. https://kruxor.com/view/code/kM..
rounded click me button with icon
just a rounded button with a font awesome icon
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]
I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..
add years as options to select dropdown
add the years as dropdown items between a range of years with javascript document ready js only version
linux mount a drive manually
this is how you can mount a drive in linux first list the drives available with: BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL or this BASH sudo blkid ok once we have th..
add a moving chevron to your href link
this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it
add click event to multiple link items and load the link content into a target div ajax
this will get a group of links with existing href targets and load them dynamically with an ajax callback you will need to also include the full jquery script as the slim one does not include the aja..
add click event to multiple link items
this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..
inline form field padding
I noticed this when doing this demo (get the value of an input form element). Looks like inline form elements look pretty average when a button is added to the same line. i think this should..
minutes to decimal calculator javascript version
trying to do a more simple version of this post. https://kruxor.com/view/code/NIjAQ/quick-tool-to-convert-time-into-decimal/ the php version requires post back to the server, so i think this c..
append a query string to all url's on a page
this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.
using text-stroke to add a border to your text
this is quite good for webkit enabled browsers, and most of them are these days. Check what is supported: https://caniuse.com/?search=webkit-text-stroke
installing exfat and ntfs drivers to enable reading of these filesystems
this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..
linux list all drives and partitions
the following command will list all drives and partitions in your shell BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL It should look something like this depending on your drive se..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
how to check the temperature of the pi using command line
to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..
how to find what version pi you are using
So i was wondering the other day how to show what raberry pi i had, rather than opening it up. you can install lshw and it can list all your hardware Install it with BASH uname -r which should gi..
Uncaught TypeError: $(...).slideToggle is not a function
Uncaught TypeError: $(...).slideToggle is not a function at toggle ((index):226) at HTMLAnchorElement.onclick ((index):239) I noticed this one today when looking up this post:https://kruxor.com/view/..
slick carousel jump to a slide on element hover
jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..
github logo background png css
just the github transparent logo as a css class, yes it should probably be a svg, but here it is in all its PNG glory.
animated rings expanding with delay ripple water effects
just testing this one
using the last-of-type css selector to remove a border from the last item in a list
i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones. This allows me to target the..
Aligning Images in TinyMCE or Floating them left and right (code)
Here is the code for this page Aligning Images in TinyMCE or Floating them left and right
calculate a percentage (dec) difference based on two numbers
I wrote this function a while ago, but im not actually sure what its suppost to do, so ill test it here and see what it returns. I think after running this function it returns the differents in perce..
Adding HTML Templates into TinyMCE Editor
This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..
How to set a cookie and expire it in 30 days
Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..
how can i make my code look nice, or highlighted in evernote
* update: this is actually a paid tool, so i will be skipping this, as the code highlighting function is not that important to me. If anyone finds a nice free way to do this let me know. I have only ..
TortoiseSVN for updating wordpress plugins
For updating wordpress plugins, and probably other SVN related stuff, i found that using TortoiseSVN is the easiest. For windows anyway. Just go to the downloads page, and pick the correct flav..
install atom editor on ubuntu
You can download atom from https://atom.io/ and run the .deb package or if you want to use apt you will need to add it as a repository. https://flight-manual.atom.io/getting-started/sections/installi..
change images to upload file also to imgur [reported]
may also create a seperate db to store imgur image links? can update the source_link in the current images to link to the imgur version. I remember i did this a while ago but cant remember the code ..
enable dark mode in tinymce
Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still. You need to also includ..
codemirror htmlmixed textarea
a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now.
install codemirror for textareas [added]
i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..
using multiple text shadow
sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..
box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it. Related Pages: https:/..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
add a youtube video preloader function, lazy load youtube [fixed]
I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..
@import and html link to Montserrat font family google font
includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.
my default text shadow css
just a quick copy and paste for easy text shadow that fits in most places
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass this also involves some css changes to get this working i would also like in the fut..
add a comment recording system for posts [idea]
add a custom comment system for code and posts with google recapcha
fix view page for search links [reported]
its still showing raw data on these view pages e.g https://kruxor.com/view/search_links/KJYU0/mt-maunganui/ Looks like that example is already out of date, here is a new one: https://kruxor..
style page numbers [fixed]
need to style the page numbers. https://kruxor.com/list-table/search_links/ Before: After: Dark Mode Light Mode
explode a string into an array
This uses the php explode function to split a string into an array based on a delimiter character. I always forget which order this goes in.
checking the current url and then marking a link active based on that url
i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..
using gzdeflate on a string php
yes you can actually run compression on a string to save space and then uncompress it at the other end...
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
set maxHeight of element by id with javascript
sets the max height value of an element with javascript demo pending
badge border colour is too dark or light on number badges [fixed]
I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..
badge placement is offset in list pages [fixed]
Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer. ..
top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
include tinymce only if a user is logged into the site
For google page speed i had an issue when every page was loading tinymce, which is quite a large script. I only actually use this script when editing pages, so this is the change i made to only inser..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
easy twitter embed code
Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently.
How to add jquery to squarespace site
I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
add a jquery date picker to your text box
This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery JQuery UI Documen..
foundation old grid format
This uses the old foundation grid style, i think it was a float grid, not sure which version it was maybe version 5 foundation. Somewhere around here: https://cdnjs.com/libraries/foundation/5.0.0&nbs..
replicating the bootstrap dropdown toggle in jquery
here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..
bootstrap basic grid layout
nice and easy copy and paste for a basic grid layout
background image on 3 boxes not scaling correctly fix
So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix? Pixels rather than Perce..
Windows Emoji Shortcut
I keep forgetting this shortcut so ill add it here. Windows Key + . Windows Key + ; These both pop open the emoji menu in windows. Enjoy Your Emoji's 😘
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
play a sound every # of seconds
This plays a beep sound every # of seconds, to stop it just reload the page 4 Minutes is 240 4.5 Minutes is 270 5 Minutes is 300
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
download icon svg
a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..
add paging to wp list query
this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories.
check that a number is in the correct range based on a form selection
This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..
how to install js socials for social media share buttons and make them rounded
This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
css perspective and transform css properties testing
i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. with the ..
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
Quick tool to convert time into decimal
I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..
using javascript to open a link in the same window and in a new window or tab (open link)
a nice easy way to target _self or _blank when opening a link using javascript
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
match a category id in wordpress and then add styles just for that id
this is in template-parts/content.php which may be different based on your theme or version of wordpress. you can locate the category id in wordpress by going into categories and then clicking ..
bootstrap collapse or toggle a div visibility
if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something.
drop shadow text class easy drop shadow
makes it a bit easier to read light text on a dark background or vice versa
center everything in a div with flex-center (centre)
i usually add this to my base css styles, as a way to easily center something in the middle of an element. then you just add this flex-center class and everything will be horizontally and verti..
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
country select javascript check which option is selected
this is an example of how you can get the selected country value with javascript from a html countries dropdown
php countries array to dropdown form element
here we generate a form dropdown from a php countries array using the country code as the name of the form option
get the current post id from content.php
this should assign the current wordpress post id to $post_id, from template-parts/content.php if you want to show it, just echo the $post_id
wordpress get the current category id name and slug
This gets and displays the current category id in a wordpress blog post if you have the current id, if not you can leave the $post_id blank and it should see if there is a category loaded to the curre..
fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty
This is usually caused by something being inside the element used to render the reCAPTCHA. In this case tinymce was adding a or a <p> tag to the element Removed the space and this f..
search a zip file with windows command prompt and 7zip
if you ever need to search for a file in a zip file this is how to do it (in windows). Also you will need to install 7zip Open a command prompt CTRL+R and type cmd cd C:\Program Files\7-Zip 7z l c..
create a rainbow background using css linear gradient
just incase one gradient is not enough for you we can also use it to create a rainbow background gradient
certbot add a certificate for one domain
this adds a certificate for one domain and modifies the nginx config to use the certificate also giving you the option to redirect all traffic to the secure version
Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom
This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..
Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked
Apparently this error is caused by not closing the database after using it. Warning: SQLite3::query(): Unable to execute statement: database is locked. You can close the database using the fol..
simple usage for php password_hash
password_hash is used to generate a hash for a password. using this in its simple form can be good for generating a hash from some text like the following code.
enable tinymce on a target textarea by id
this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page
Bootstrap Darkmode Switch
I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..
Create a UTF8 General MySQL Database with Command
This will create a UTF8 database with the character encoding utf8_general_ci replacing the with your database name. I was manually doing this in adminer before this and selecting the encoding, this i..
fix for Uncaught TypeError: e.indexOf is not a function
fix for depreciated window load Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load (jquery-3.5.1.min.js:2) at default.aspx:993 I found this error when upgrading from a..
switching stack order of floats with flex
responsive stacking, changing the order of how they stack. so by default they should stack in order they are listed in, like if the pink box is 1st then it should stack on top of the blue box when it ..
To make Ubuntu do nothing when laptop lid is closed
sudo nano /etc/systemd/logind.confchange this to ignore: `HandleLidSwitch=ignore`save the filerestart the login daemon sudo service systemd-logind restart
change string to capital words ucwords
This will change an upper case or lower case, or mixed case string to uc words. Example with this page title
scroll to top html css and js
add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..
bold the numbers in a ol li list
sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:
add a user to a group
usermod -a -G examplegroup exampleusername
loop through each directory in a target directory and compress them
this one loops through each of the target directory and also compresses each one
loop through each directory in a target directory
i thought this would be useful for backing up all files in the /var/www/html/ directory rather than having to do each seperately, this loops through all of them
add a class or remove it based on window scroll location
if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..
javascript window.onload
wait for the window to load and then run a function
adding pulsating dots to your css ul li list
get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.
wordpress adding post custom field meta and displaying it on you template
if you want to be able to add custom post fields into your pages in wordpress and display them in your template this is how you can do it, no plugin is required for this as post meta is available by d..
get element by class name with javascript and change it function
You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..