Search

Search Code by entering the text above.
javascript
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

5:01 am, April 21, 2021
javascript
clear a input field when it looses focus using onblur
...

this will cause the input field to clear when it is not in focus

10:56 pm, April 6, 2021
python
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..

1:11 am, April 4, 2021
javascript
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-..

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

11:18 pm, March 24, 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
change a select box back to its initial select value
...

this will reset the select box selected value back to the 1st item in its options list

1:00 am, March 17, 2021
javascript
select onchange
...

select onchange run a function this will run the check_years function when the select value is changed

11:54 pm, March 16, 2021
javascript
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

11:35 pm, March 16, 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
javascript
loop through object json javascript
...

this shows how you can loop through a javascript object using for if you check the console you can see the loop results

12:09 am, March 16, 2021
jquery
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..

3:24 am, March 9, 2021
javascript
set the html of an element javascript
...

this will set the innerhtml value of an element

11:34 pm, March 8, 2021
javascript
get the value of an input form element (input value)
...

add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..

11:56 pm, March 7, 2021
javascript
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..

11:38 pm, March 7, 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
jquery
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/..

12:11 am, February 17, 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
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
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
...

Include the following script. Or you can grab the latest version at the cdnjs website. ```<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" integrity="sha512-Me..

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

2:53 am, January 23, 2021
javascript
codemirror htmlmixed textarea
...

a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting.

2:09 am, January 23, 2021
site bugs
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..

8:24 am, January 22, 2021
javascript
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..

8:49 am, January 21, 2021
site bugs
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..

2:58 am, January 21, 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
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
javascript
set maxHeight of element by id with javascript
...

sets the max height value of an element with javascript demo pending

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

2:36 am, January 1, 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
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
javascript
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:

11:39 pm, December 22, 2020
javascript
Modern HTML5 Techniques for changing classes
...

12:56 pm, December 7, 2020
javascript
vimeo thumbnail generator
...

5:35 am, December 7, 2020
javascript
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

3:38 am, December 7, 2020
javascript
Monitoring Visible Objects on Screen
...

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

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

4:45 am, November 24, 2020
javascript
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..

5:42 am, November 23, 2020
javascript
using javascript to open a link in the same window and in a new window or tab
...

a nice easy way to target _self or _blank when opening a link using javascript

4:26 am, November 13, 2020
javascript
Leaflet Quick Start Example
...

just a quick start map embed for leaflet js an alternative to google maps

4:45 am, October 26, 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
javascript
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

1:54 am, September 22, 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
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
javascript
javascript window.onload
...

wait for the window to load and then run a function

11:32 pm, June 29, 2020
javascript
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..

1:59 am, June 17, 2020
javascript
loading content into fancybox modal using ajax
...

This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked

4:30 am, June 5, 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
fancybox modal popup example
...

an example showing fancybox text modal window attached to a button to open it

6:59 am, May 29, 2020
javascript
javascript isset equivalent
...

i was just looking for an equivalent to the isset in php for javascript, i was initially using .length but this can still cause errors so i found this solution. if (typeof my_var !== 'undefined') {}

6:39 am, May 19, 2020
javascript
Use Sweet Alert rather than alert!
...

i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..

11:35 pm, May 7, 2020
javascript
use javascript to open a link in a new tab or window
...

im not sure why you would use this rather than using the html target="_blank" but it could be useful if you needed to open a new tab in a javascript function.

3:59 am, May 1, 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
javascript
Load and Unload TinyMCE editor from a button
...

Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..

2:53 am, April 17, 2020
javascript
ES6 Nested Object Example
...

extracting variables from a nested object with new variable names

1:09 am, February 3, 2020
javascript
ES5 vs ES6 Object Example
...

here you can see the syntax changes between ES5 vs ES6 Object declaration, you can still access the values in the same way.

12:41 am, February 3, 2020
javascript
Use Recursion to Return a Range Array
...

using recursion to return a range array between the two numbers added

11:38 pm, February 2, 2020
javascript
Use Recursion to Count Down
...

just a slight change to the count up version of this, using unshift rather than push to the array.

10:29 pm, February 2, 2020
javascript
Use Recursion to Count Up
...

10:20 pm, February 2, 2020
javascript
Get the documentURI with JS
...

This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.

10:06 pm, January 28, 2020
javascript
js using recursion to create a range of numbers
...

in this we will create a function that calls its self to add to an array a range of numbers

4:25 am, November 25, 2019
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
Using the rest operator to pass in a variable amount of arguments
...

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...

5:49 am, October 1, 2019
javascript
Default Parameters for Functions
...

You can pass in default parameters for functions so that if the function is used with no parameter it will use the default one.

5:23 am, October 1, 2019
javascript
Complex Arrow Function Example
...

Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.

5:14 am, October 1, 2019
javascript
Writing Arrow Functions with Parameters
...

you can pass parameters to arrow functions as well as shown in the following demo, these functions are only meant to be used once where normal functions can be re-used.

12:36 am, October 1, 2019
javascript
using arrow functions to convert small functions into one line statement functions
...

in this exercise i will take a function variable and write it in one line using the arrow function

12:09 am, October 1, 2019
javascript
Prevent Object Mutation
...

This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.

11:16 pm, September 30, 2019
javascript
Changing an array declared with const
...

a const means that you cannot re-declare the variable name, but you can still mutate an array content that is declared as a const. so you can see in the following example that even though the array is..

6:17 am, September 30, 2019
javascript
using let and const example
...

This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed. 

4:55 am, September 27, 2019
javascript
using let rather than var
...

Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..

4:18 am, September 27, 2019
javascript
Use Multiple Conditional (Ternary) Operators
...

I actually find if then statements much easier to read than these ones, but these seem more efficient. 

3:18 am, September 27, 2019
javascript
js - Use the Conditional (Ternary) Operator
...

this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..

6:23 am, September 24, 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
Using parseInt in a function to return an integer or not
...

this function uses the parseInt function to return a proper integer or an error code if it can't. So this demo should return NaN for the Not an Int (x1235) and The int for the 00001235. I think that N..

5:57 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
javascript
split a string into an array using split javascript
...

this will split the string into an array based on the spaces inbetween words. you can split it based on any character, for example if you had words in csv comma format you could use the second example..

4:47 am, September 16, 2019
javascript
get the current url in javascript
...

this will get the current address add it to a variable and show it on the result element

3:47 am, September 13, 2019
css
Radial Click Effect
...

shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.

1:13 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
js
Generate Random Fractions with JavaScript
...

generate a random fraction and add it to result when clicking a button

6:09 am, August 26, 2019
javascript
FCC - Basic: Profile Lookup
...

my solution to the FCC Basic js Profile Lookup, with added results area and button to run the function. json, array

5:38 am, August 26, 2019
javascript
Do While Loop
...

showing how to use a do while loop, i don't use these ones very often usually just a for loop.

11:26 pm, August 25, 2019
javascript
for loop through an array with javascript
...

looping through an array with javascript using a basic for loop

12:18 am, August 23, 2019
javascript
tinymce remove auto p tags setting
...

this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.

6:15 am, August 13, 2019
javascript
get the dimensions of an image with javascript
...

this will show the height and width of an image using javascript

5:55 am, August 13, 2019
javascript
basic for loop odd numbers
...

a basic for loop with odd numbers adding to an array

6:20 am, July 31, 2019
javascript
check if something is an array
...

this function will check if something is an array

5:26 am, July 31, 2019
javascript
getType function for js
...

this function returns the type of item, array object string number etc

11:50 pm, July 29, 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
using switch with multiple identical cases
...

this can be used if you have several outcomes where the return value will be the same by omitting the break from the cases before the final

1:32 am, July 29, 2019
javascript
using switch in a function
...

This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.

11:19 pm, July 28, 2019
javascript
js function to calculate golf scores
...

this function will return the score name depending on the par and strokes for golf

1:48 am, July 24, 2019
javascript
compare non equality function
...

this will check if two values are not equal

11:15 pm, July 23, 2019
javascript
compare equality function
...

this will check if two values are exactly equal

10:57 pm, July 23, 2019
javascript
JS Using typeof to check on string types
...

you can use the typeof operator to check what kind of variables you have.

2:38 am, July 23, 2019
javascript
testing equality
...

showing the difference between == and === operators

5:57 am, July 22, 2019
javascript
defining a variable inside a function without using var will create a global variable
...

here is an example showing a variable defined within a function showing how it becomes a global variable if not defined with var

5:15 am, July 22, 2019
javascript
add something to the start of an array with unshift
...

unshift is the opposite of push where push adds to the end of an array unshift will add to the start of the array.

2:40 am, July 19, 2019
javascript
remove the first element in an array with shift
...

like pop but shift does the 1st element in an array

2:37 am, July 19, 2019
javascript
document ready javascript standalone version no jquery
...

this is a version of a dom ready or document ready that does not require jquery

1:14 am, July 17, 2019
javascript
add a class to a div with an id javascript
...

a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.

1:11 am, July 17, 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
javascript
remove something from the end of an array with pop
...

pop is the opposite of push and will remove the last item in an array, it also returns the value so you can assign it to a variable

5:58 am, July 16, 2019
javascript
add something to the end of an array with push
...

you can easily add to the end of a javascript array with the .push function.

5:49 am, July 16, 2019
javascript
Multidimensional Array
...

sounds complex, but it's not really here is an example of a Multidimensional Array in javascript. It's just one array nested in another.

4:50 am, July 16, 2019
javascript
get the last letter of a string
...

you can use the .length and the index of a string to get its last value

4:40 am, July 16, 2019
javascript
accessing part of a variable using its index
...

you can access part of a string variable using its index[1]

4:34 am, July 16, 2019
javascript
js check the length of a string
...

using the javascript .length property

2:04 am, July 16, 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
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
wordpress
wordpress register enqueue javascript require jquery
...

This usually goes in the theme functions file. This will load it after jquery if it requires it. wp_register_script('scriptname', get_template_directory_uri() . '/js/scripts.js', array('jquery'), ..

6:20 am, August 31, 2018
js
google map with overlay data
...

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

6:20 am, August 31, 2018
js
validate form data using javascript to check required html elements
...

for use in a javascript function to submit a form var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i..

6:20 am, August 31, 2018
javascript
json loop load elements
...

Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..

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
set and check a cookie using js cookie
...

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

6:20 am, August 31, 2018
js
jquery clone and append elements
...

This jquery function clones an element and appends it to another one.  Here is the basic code: $( ".clone-me" ).clone().appendTo( ".append-me" );I also updated this to work with just raw js, so..

6:20 am, August 31, 2018
js
show the year with js
...

just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..

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
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Old programmers never die; they just lose some of their functions.