Search
Search Code
Search Code by entering your search text above.
fonts
Quick Embed Import and Code Samples for Google Font Roboto

quick embed codes and code examples for the google font Roboto. Roboto Font Preview

5:30 am, July 20, 2022
css
rainbow text background clip with linear gradient

testing using background clip with a linear gradient background colour to make the text appear rainbow colours 🌈 

2:02 am, July 6, 2022
php
save string to file php

save the contents of a string to a file This function is identical to calling fopen(), fwrite() and fclose() successively to write data to a file.

4:01 am, July 4, 2022
php
using preg_match to extract text from elements

using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..

1:41 am, June 24, 2022
modals
Load fancybox modal on hash check

I was just testing this code, not working on the hash check as yet. 

1:40 am, June 15, 2022
php functions
php validate email function

php function that can be used to validate an email address string

1:59 am, June 12, 2022
domains
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..

5:42 am, June 10, 2022
Site Updates
Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

5:07 am, June 10, 2022
fonts
Quicksand font quick install

Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both. 

1:25 am, June 3, 2022
php
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..

9:16 am, May 29, 2022
Site Bugs
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..

7:28 am, May 22, 2022
Site Bugs
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 ..

6:39 am, May 20, 2022
javascript
Twitter Post Fetcher Script

Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome... 

12:43 am, May 3, 2022
git
git basics - git init, git commit, git all, git *

create a new repository git init the following code can be typed in a terminal window, once you have installed git for your OS. This will create a directory called git-test assuming you already hav..

3:23 am, April 22, 2022
css
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.

1:14 am, April 12, 2022
api
test love like dislike script from api

just testing writing to page from javascript and api

5:04 am, March 11, 2022
javascript
best way to write html into an existing page javascript

this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it.  Add an element, before including the script..

3:21 am, March 11, 2022
core
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..

2:35 am, March 10, 2022
javascript
Uncaught TypeError: Cannot set properties of null (setting 'onclick')

I was just testing some code and noticed i had this error on my site.  Locate the error in the site code I removed this script, so the whole thing is now not required, as i opted for the au..

12:12 am, March 9, 2022
javascript
check url hash using javascript

What is a url hash? This is a URL Hash. You can add the # symbol on the end of a url and content after it, and this will not effect the content usually, unless the browser is intructed to do somet..

3:59 am, March 7, 2022
css
highlight a button with an animation css

While i was downloading the latest AdoptJDK i noticed this button, and thought it was a nice effect.  I wondered how hard it would be to replicate this. Copy the link html Check each class..

12:48 am, March 4, 2022
javascript
Converting PHP to Javascript for State Extraction by numeric value Australian State Names

I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working.  The original function takes an austra..

2:33 am, February 25, 2022
svg
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..

8:46 am, February 17, 2022
javascript
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 ..

4:17 am, February 14, 2022
Alpine JS
Alpine JS Testing

some simple tests using alpine js

10:28 pm, February 10, 2022
Slick Slider
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..

4:55 am, February 9, 2022
node
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..

4:00 am, January 28, 2022
html
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..

12:01 pm, January 18, 2022
sqlite
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..

4:20 am, January 18, 2022
javascript
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));  

11:03 pm, January 10, 2022
javascript
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..

10:39 pm, January 10, 2022
javascript
Create Strings using Template Literals

if you use the backtick to enclose your strings you no longer have to use \n for a new line.  For example: `this is a multiline ...string!!` Console Example

5:55 am, December 29, 2021
php
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. 

2:24 am, December 20, 2021
php functions
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..

5:45 am, December 1, 2021
javascript
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..

11:47 am, November 29, 2021
php functions
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..

12:24 pm, November 22, 2021
virtual box
allow internal networking connection from virtual box vm

This will allows you to access a shared folder on a Windows 10 Virtual box from Windows 11. Probably also works with other windows versions, but only tested with the host OS beinf windows 11 and the V..

2:26 am, November 8, 2021
php functions
youtube search api request function

This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..

2:04 am, November 4, 2021
php functions
list all array json function list_all_array_json

I wrote this a while ago, and i always forget the complex functions i write so ill add it here.  This loads all fields and then returns them as json. 

5:51 am, November 3, 2021
php
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.

3:40 am, October 31, 2021
javascript
javascript try catch example function

try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..

2:01 am, October 29, 2021
javascript
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. 

4:43 am, October 26, 2021
jquery
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. 

4:36 am, October 26, 2021
react
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..

4:40 am, October 19, 2021
javascript
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..

4:03 am, October 19, 2021
javascript
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..

3:05 am, October 19, 2021
javascript
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..

2:01 am, October 19, 2021
php
list_all_array an early stages of list all function that uses an array to pass in main variables

I think this is more neat than passing in individual variables into the list_all function, seems to work ok so far.  Still in early stages of this listing function, more needs to be built into i..

12:15 am, October 18, 2021
php
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..

11:58 pm, October 17, 2021
php
using the $_SERVER['HTTP_REFERER'] to check referring pages

shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..

3:28 am, October 17, 2021
site bugs
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..

2:52 am, October 16, 2021
react
How to Write a React Component from Scratch

Just testing my react component writing skills...

12:09 am, October 16, 2021
react
What is a Stateless Functional Component in React

What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it.  This method creates ..

12:24 am, October 12, 2021
react
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..

9:18 am, October 11, 2021
react
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..

8:49 am, October 11, 2021
react
using babel for react compiling in browser

this is currently just an idea, as i saw that codepen uses babel to run react i was wondering i can do the same thing here and then just write normal react script and have babel compile it.  so ..

8:41 am, October 11, 2021
react
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..

4:00 am, October 11, 2021
javascript
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!  

8:36 am, October 8, 2021
ideas
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..

8:55 am, October 6, 2021
php
create a 200 character summary from a longer html string

this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string.  Function function create_summary($htm..

11:16 pm, October 5, 2021
html
twitter social sharing meta tags

I had done this one so many times on client sites I actually forgot that i had not applied it to my own site! Doh! Anyway this is the tag setup i use for adding the title, url, author and featured im..

11:51 am, October 5, 2021
php
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. 

4:18 am, September 30, 2021
html
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..

3:05 am, September 20, 2021
javascript
change the box-shadow of an element with javascript boxShadow

changes the box shadow of test_div using the javascript object(?) boxShadow

4:39 am, September 18, 2021
javascript
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

4:03 am, September 18, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
site documentation
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, ..

4:06 am, September 2, 2021
php
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..

4:23 am, August 26, 2021
php
test php bundle write

just testing

1:49 am, August 26, 2021
php
check if a file exists with php

checks if a file exists in php returns true of false

9:33 am, August 23, 2021
jquery
simulate a click on an element with jquery

you can actually use jquery to simulate a click event using the following .click() so as soon as the document is ready and you have jquery loaded it will run the click event for you, and should pop ..

3:41 am, August 23, 2021
css
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..

9:52 am, August 16, 2021
javascript
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..

5:17 am, August 10, 2021
php
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 ..

3:52 am, July 31, 2021
javascript
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...

2:56 am, July 26, 2021
css
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 ..

5:15 am, June 30, 2021
svg
globe svg testing (broken)

nope seems not to be working, it seems you cant just copy the glyph path into a normal svg and hope for the best, oh well i tried. 

6:32 am, June 29, 2021
css
how to make a transparent logo white with css

lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo.  well with this css trick you can just make t..

3:07 am, June 29, 2021
php
verify the google recapture server php

i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..

12:45 am, June 25, 2021
javascript
using clamp js to clamp lines of text

there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..

11:17 pm, June 22, 2021
jquery
jquery toggle menu testing

using jquery toggle to show and hide the sub menu's

3:52 am, June 15, 2021
site documentation
load the latest single item only

this function loads the lastest item from the selected class

1:24 am, June 11, 2021
site documentation
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..

1:19 am, June 11, 2021
site documentation
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..

12:10 am, June 11, 2021
site documentation
Latest from Code Widget

What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all(        $start = 0,        $max = 10,      &n..

6:18 am, June 9, 2021
php
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

12:50 pm, June 8, 2021
php
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..

4:19 am, June 3, 2021
css
backdrop-filter: blur(10px);

just testing this filter

11:34 pm, May 25, 2021
javascript
json test objects (or arrays)

here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..

12:22 pm, May 25, 2021
javascript
loop through a complex object json javascript

just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..

12:19 pm, May 25, 2021
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..

6:48 am, May 25, 2021
javascript
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..

3:13 am, May 14, 2021
php
passing in arrays to your functions rather than using variables

this is probably an old technique, but i discovered it the other day when i was playing around, and i thought wow i should do this to all my functions, i cant see the downside, apart from having to re..

1:11 am, May 11, 2021
javascript
fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

4:12 am, May 10, 2021
css
css responsive max and min targets @media

showing how you can target elements within a max and min screen width demo:

1:39 am, May 7, 2021
php
Remove background image php with image magic

untested research on removing background and making it transparent with php

12:12 am, May 3, 2021
php
list a functions variables or arguments

i think this has to be used within the function to get its arguments, i have not tested this one yet.

12:12 am, April 21, 2021
html
a page with two images

a page with two images for testing

7:03 am, April 4, 2021
css
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..

6:00 am, March 26, 2021
linux
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..

8:33 am, March 18, 2021
javascript
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 ..

5:23 am, March 17, 2021
javascript
using moment.js to make your time format nicer

moment.js is a very nice way to handle multiple date strings and output them in a nicer format.  grab the latest copy of momen from cdnjs lets say our date is in this format, i think this is un..

11:15 pm, March 16, 2021
jquery
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..

3:51 am, March 9, 2021
javascript
check if a certain query string is set then apply it to all url's on the page

this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..

8:22 am, March 1, 2021
javascript
check if a query string item is set in the current url

this will check and console log if a query string on this page is set to test=anything example url is:  Test is not set: https://kruxor.com/view/code/XzLaT/  Test is set using & : htt..

5:49 am, March 1, 2021
javascript
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.

5:45 am, March 1, 2021
javascript
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..

4:00 am, February 15, 2021
css
animated rings expanding with delay ripple water effects

just testing this one

5:00 am, February 10, 2021
php
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..

8:35 am, February 6, 2021
javascript
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..

12:14 am, February 5, 2021
jquery
jquery page search [testing]

just testing this one at the moment for a in page search.  Based on this: https://codepen.io/chriscoyier/pen/ExgqWab  I would like to adapt this code to search through page elements and ma..

8:27 am, February 3, 2021
Testing
Testing

test <p>test</p> x .my-selector{ value:1px;} HTML <table></table> CSS .css{} Javascript function test() { console.log('test'); } PHP a = 1; x x

11:42 pm, February 2, 2021
javascript
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..

9:51 am, February 2, 2021
apps
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 ..

9:36 am, February 2, 2021
site bugs
style page numbers [fixed]

need to style the page numbers. https://kruxor.com/list-table/search_links/  Before: After: Dark Mode Light Mode  

2:26 am, January 14, 2021
javascript
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. ..

1:32 am, January 13, 2021
site bugs
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..

2:44 am, January 12, 2021
css
change the cursor to a pointer for an element

i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..

12:19 am, January 12, 2021
css
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..

6:09 am, December 31, 2020
php
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..

5:44 am, December 23, 2020
html
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.

5:38 am, December 23, 2020
wordpress
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. 

11:37 pm, December 1, 2020
jquery
using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen.  Plugin Link..

12:24 am, December 1, 2020
css
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 ..

2:51 am, November 23, 2020
bootstrap
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..

12:31 am, November 23, 2020
wordpress
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..

3:03 am, November 18, 2020
css
simple table stripe striping

this uses the nth-child(even) element to add color striping to the following table test table x       x     x           &..

12:48 am, September 29, 2020
javascript
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

2:05 am, September 22, 2020
wordpress
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..

6:01 am, September 21, 2020
js
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 &nbsp; or a <p> tag to the element Removed the space and this f..

5:43 am, September 18, 2020
css
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

3:53 am, September 1, 2020
bootstrap
extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..

5:14 am, August 31, 2020
bootstrap
Bootstrap 4 Center menu items in a navbar

Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens.  Add the follow..

12:05 am, August 28, 2020
bootstrap
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..

11:54 pm, August 18, 2020
javascript
stop tinymce replacing urls with relative url's

If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..

12:55 am, August 18, 2020
jquery
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..

12:20 am, August 3, 2020
wordpress
list items matching a category title

this is just raw at the moment, not tested or working. this is matching a category number at the moment so would need an additional way to link that number to the category name, or know what the categ..

4:08 am, June 12, 2020
javascript
inline fancybox modal testing

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

6:12 am, June 3, 2020
javascript
force existing link to open in a new window with javascript

here is some javascript that grabs an existing link and then forces it to open in a new tab when clicked.

3:49 am, May 1, 2020
html
load a youtube video in a fancybox modal

With just a couple of lines of js and html you can load your video links in a modal lightbox. Get the latest version of the fancybox scripts (just the links) from here: https://cdnjs.com/libraries/fa..

10:46 pm, March 2, 2020
css
using css linear gradient for background overlays

a few examples using css linear gradient for the background

12:34 am, February 17, 2020
javascript
Using the Spread Operator to Evaluate Arrays In-Place Tests

My tests using the Spread Operator rather than the apply function. In the 1st function show_max_array i use the apply operator to convert the array into comma seperated values. In the show_max_array..

1:02 am, October 14, 2019
javascript
Use the parseInt Function with a Radix

This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..

6:14 am, September 24, 2019
javascript
Generate Random Whole Numbers within a Range

My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..

5:15 am, September 24, 2019
css
Custom 12 Grid using CSS Grid

For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..

2:19 am, September 6, 2019
html
template for testing and live reloading html files

this is a template that i use while testing flat html files, if you add it to a server it will live reload. this does seem to cause issues depending on the site that is is used on, like reloading all ..

3:27 am, September 4, 2019
js
Generate Random Whole Numbers with JavaScript Function

generate a random whole number function with test buttons

6:20 am, August 26, 2019
javascript
check if something is an array

this function will check if something is an array

5:26 am, July 31, 2019
javascript
Objects in javascript

creating and using an object in javascript, the full version of this testing is on codepen

11:25 pm, July 29, 2019
javascript
card counting example from fcc

here is a solved version of the card counting function from free code camp you can test it using console log.

2:00 am, July 29, 2019
javascript
testing equality

showing the difference between == and === operators

5:57 am, July 22, 2019
javascript
using local storage rather than cookies to store data (localStorage)

you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.

11:31 pm, July 16, 2019
css
using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..

2:33 am, July 8, 2019
html
Applied Accessibility - Access Keys

Access keys can be applied to link elements and in chrome you can access them by pressing ALT+ SHIFT + [accesskey] for some reason when testing this in chrome the a key was not accessible, but g and ..

11:40 pm, July 1, 2019
html
Dropdown Box with Searchable Text

Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..

11:57 pm, June 30, 2019
css
Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

5:36 am, June 26, 2019
php
function to create a uid from html

this function converts a html string into a uid or unique id type string, its not actually unique, but its a string that can be used to make the title of something that contains html into a usable str..

12:44 am, March 22, 2019
php
calculate a percentage (dec) difference based on two numbers

this function will show you the percentage difference between two numbers

12:13 am, March 22, 2019
css
Using Flexbox rather than Floats

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

4:27 am, January 16, 2019
css
css :active pseudo-class usage

The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.

1:22 am, October 5, 2018
php
uniqid random string

Here is a smaller implimentation of the built in uniqid() function. Good if you want to generate smaller unique strings for url's uniqid example suniqid(5) function suniqid($len = 5) { $..

6:20 am, August 31, 2018
php
using parse_url to extract parts of a url

Category: PHP the parse_url php function will split a url into an array of url fragments $url = "http://kruxor.com/path/?argument=value#anchor"; var_dump(parse_url($url)); parse_url example ..

6:20 am, August 31, 2018
php
try catch test

try and catch example try { //enter code to catch file_get_contents($link); } catch(Exception $ex){ //Process the exception $page_content .= "Unable to process : $link"; }

6:20 am, August 31, 2018
wordpress
wordpress check home and not home for banners and things

this quick function will check if the page is home or not good if you want something on the other pages and something just on the home page in the header or that kind of thing. i have tested this i..

6:20 am, August 31, 2018
php
sqlite delete data older than timestamp days

good if you need to delete data older than a certain date, i tested this and it seems to delete data older than 2 days but might have had the time stamp incorrect or something. DELETE FROM $db_tabl..

6:20 am, August 31, 2018
php
search within files in a directory

During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..

6:20 am, August 31, 2018
php
show errors in php with toggle

Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..

6:20 am, August 31, 2018
js
truncate string using jquery

.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..

6:20 am, August 31, 2018
js
flems embed in url

Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..

6:20 am, August 31, 2018
js
load google sheet data into json string with jquery

Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..

6:20 am, August 31, 2018
js
scrollbar replacement simplebar

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

6:20 am, August 31, 2018
js
parallax js scroll testing

Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..

6:20 am, August 31, 2018
js
mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

6:20 am, August 31, 2018
js
testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

6:20 am, August 31, 2018
js
random string generator guid

a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..

6:20 am, August 31, 2018
js
using regex with replace to replace all instances of something in a string

so you have a string and you want to replace a recurring character, use this to do it: String Example: var string = "a-string-with-dashes.txt"; var string = "a-string-with-dashes.txt"; string..

6:20 am, August 31, 2018
js
find all elements add class jquery

this will grab all a elements, and dump them to the console. var allLinkElements = $( "a" ); console.log(allLinkElements); then we need to split into a jquery object, this is a jquery version of an..

6:20 am, August 31, 2018
js
load content with jquery

Load data from the server and place the returned HTML into the matched element. this one seems simple but very useful $( "#result" ).load( "ajax/test.html" ); this one will load the content o..

6:20 am, August 31, 2018
js
stacktable jQuery plugin for stacking tables on small screens

stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..

6:20 am, August 31, 2018
js
fancybox youtube showing video links in a lightbox

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 fan..

6:20 am, August 31, 2018
html
simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page

6:20 am, August 31, 2018
html
flexbox layout template

thought i would see what a full page example layout would be like using flexbox rather than floats Using this for flexbox reference flexbox layout Note: tested working in ie11.. yay.

6:20 am, August 31, 2018
css
css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

6:20 am, August 31, 2018
css
cycle color using background

I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..

6:20 am, August 31, 2018
css
css grid for layouts with no rows

I had a look at this recently, but my previous example still used rows for a grid, which apparently is not the correct way of using css grids. I think the issue (I had) with css grid is it seems co..

6:20 am, August 31, 2018
css
css grid for layouts and how to use it

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...

6:20 am, August 31, 2018
css
click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

6:20 am, August 31, 2018
css
why are people so amazed that a column layout can have a full width element

Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..

6:20 am, August 31, 2018
css
material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..

6:20 am, August 31, 2018
css
set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..

6:20 am, August 31, 2018
css
table border collapse

I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Subscribe
Subscribe to weekly update emails.
Random Quote
You want to be the best, you MUST put the long yards in! Nothing comes easy in life so stop wishing and start DOING! So many people would rather bitch and moan than help themselves. Dont be one of those negative drainers, start today, make a small change and keep going forwards with this attitude!
Unknown
Random CSS Property

transition-timing-function

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
transition-timing-function css reference