Search

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

2:01 am, September 23, 2021
foundation
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

4:33 am, September 20, 2021
javascript
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 ..

2:34 am, September 20, 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
fancybox
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. 

2:44 am, September 4, 2021
site documentation
make the view number zoom when mouse over or active

Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css.  Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..

1:24 am, September 2, 2021
php
test php bundle write

just testing

1:49 am, August 26, 2021
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..

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

1:24 am, August 19, 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
javascript
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..

12:44 am, August 10, 2021
css
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..

5:48 am, August 9, 2021
site bugs
still more comment spam

this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying.  update: 10 August 2021 Still..

6:16 am, August 6, 2021
php
split a string into links using the comma

this is a common function for some field data, lets say you have a string like this. category one, category two, another category in one field or string but i want it to display like this category ..

5:48 am, August 6, 2021
foundation
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 ..

5:01 am, August 3, 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
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:  

1:24 am, July 20, 2021
css
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 2021
site bugs
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..

4:04 am, July 10, 2021
foundation
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..

5:00 am, July 9, 2021
linux
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..

1:04 am, June 27, 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
site bugs
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..

12:52 pm, June 21, 2021
javascript
add a gtag.js pdf click event

how to add a pdf click event using the gtag.js analytics

11:36 pm, June 20, 2021
site documentation
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..

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

12:02 am, June 17, 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
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..

3:57 am, June 14, 2021
site documentation
change this to a list group - other items

Other item format is a bit average, list group should fix this.  This uses the template: core-list-item-simple.html  So we can change this a bit to the list group format.  Which i..

1:15 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
linux
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  ..

5:26 am, May 26, 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
javascript
load json with vanilla javascript no jquery

this basically does the same thing that a jquery .getJSON does but without the need for jquery.

9:57 am, 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
php
unable to access the $_FILES when submitting a form php

I was getting this weird error when submitting an image for a form upload and i could not see why the $_FILES was not set as this is where the files go from a $_POST back form in php. The error i was..

4:52 am, May 18, 2021
foundation
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. 

1:31 am, May 12, 2021
css
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

4:13 am, May 11, 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
javascript
check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..

5:12 am, May 5, 2021
javascript
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..

6:46 am, April 30, 2021
javascript
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');

6:06 am, April 30, 2021
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
php
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..

6:19 am, April 7, 2021
php
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..

5:09 am, April 7, 2021
apps
change photoshop to show px rather than pt

if your photoshop is showing pt when you select font sizes, you can change this in the settings.  in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..

2:11 am, April 7, 2021
python
python extract images into an array from a url

this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..

6:56 am, April 4, 2021
python
python url to text with beautiful soup

python using beautiful soup to convert a url into text Python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://kruxor.com"page = urlopen(url)html = page.read().decode("u..

2:08 am, April 4, 2021
python
python Install Beautiful Soup

this allows you to install the Beautiful Soup library for python which is used for html parsing BASH python3 -m pip install beautifulsoup4 python3 -m pip show beautifulsoup4 if you get an error say..

1:38 am, April 4, 2021
python
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/..

1:30 am, April 4, 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
php
php basic page router

this php page router while pretty basic does the job for this site. it takes all the query string and splits it with the / into $p variables you will also need the following nginx or similar page rew..

12:29 am, April 4, 2021
linux
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

1:24 am, April 3, 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
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
json jquery ajax request

get json data with jquery using getJSON

3:34 am, March 15, 2021
linux
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..

4:24 am, March 12, 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
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
css
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..

12:21 am, 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
linux
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..

4:56 am, February 20, 2021
linux
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..

4:50 am, February 20, 2021
css
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..

5:23 am, February 19, 2021
linux
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..

11:39 pm, February 17, 2021
linux
how to check linux kernel version on rasberry pi rasberian

You can check which linux kernel version on rasberry pi a couple of ways, the easiest is using the uname command BASH uname -r which should give you something like this (but probably not exactly th..

2:33 am, February 17, 2021
linux
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..

2:19 am, February 17, 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
css
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.

5:10 am, February 10, 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

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

3:26 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
jquery
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..

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

11:58 pm, December 17, 2020
javascript
vimeo thumbnail generator

5:35 am, December 7, 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
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
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
design elements
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..

2:43 am, November 9, 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
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
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
js
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

12:15 am, August 19, 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
html
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
css
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 ..

11:55 pm, July 28, 2020
html
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..

1:13 am, July 21, 2020
css
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.

3:26 am, June 26, 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
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
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
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
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
jquery
jquery document ready with foundation init as well

here is a jquery document ready that also loads the foundation js library. im not sure if the document foundation needs to be loaded in the document ready, but this way seems to work.

1:20 am, December 16, 2019
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
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
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
html
toggle div function with chevron up down toggle

showing an example of chevron toggles kinda like a manual accordion

1:19 am, August 9, 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
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
js check the length of a string

using the javascript .length property

2:04 am, July 16, 2019
css
image Checkbox Replacement for Forms

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..

12:28 am, January 18, 2019
php
get current class name with get_class

This will return the current class name, can be used in side a function of the current class object or give it another object name to return. class myclass {function myfunction() {echo get_class($thi..

3:37 am, October 22, 2018
php
read and sort directory contents in php

if you need to read in the contents of a directory in php and sort it by date header('Content-Type: application/json'); $dir = "./html/"; $file_type = ".html"; $out = ""; $files_array[] = ""; ..

6:20 am, August 31, 2018
wordpress
wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..

6:20 am, August 31, 2018
wordpress
wordpress include jquery in theme functions

Add this to your themes functions.php file, to include your own version of jquery. if (!is_admin()) add_action("wp_enqueue_scripts", "jquery_enqueue", 11); function jquery_enqueue() { wp_deregi..

6:20 am, August 31, 2018
php
header type json

Changes the header to show json type content when the server requests it. header('Content-Type: application/json');

6:20 am, August 31, 2018
php
extract meta tags from url and return as json array

this will download the url and extract its meta tags returning a json encoded string, with json headers. If the url is accessable. <?php header('Content-Type: application/json'); if(!isset($..

6:20 am, August 31, 2018
php
pretty printing json with php

nice if you are working with json string data and just want to be able to read through the structure without copy pasting it somewhere else. $json_string = json_encode($data, JSON_PRETTY_PRINT);

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
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
round number with js

Round a number to two decimal places. code var rounded = Math.round(num * 100) / 100; demo Result... function round_val() { var val = $("#rval").val(); var rounded = Math.r..

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
detect window scroll position jquery

This one adds or removes a class if the document is scrolled 50 px near the top of the window. $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink');..

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
change the window title

 This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..

6:20 am, August 31, 2018
js
Slick Slider Carousel

Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel

6:20 am, August 31, 2018
js
add this

To Add: https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON

6:20 am, August 31, 2018
js
change favicon with jquery

Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..

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
change the water colour in google maps for an already initialised map

good if you are using google maps and cant change the original map init code to change the styles. var mapOptions = { styles: [ { featureType: "water", stylers: [ { v..

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
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
js
do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..

6:20 am, August 31, 2018
js
tiny mce editor tinymce

Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..

6:20 am, August 31, 2018
js
clipboard copy js

for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..

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
jquery
document ready wordpress jquery

Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working.

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
access hacker news json firebase api via jquery

Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) { va..

6:20 am, August 31, 2018
js
check length of element jquery

this one can be good for checking if an element exists before doing something with it and can stop warning messages if you are running the script on multiple pages. if ($('#mydivid').length) { con..

6:20 am, August 31, 2018
js
validate email address from string

handy for a simple email verification in a form submit var emailfield = $("#emailfield").val(); var atpos = emailfield.indexOf("@"); var dotpos = emailfield.lastIndexOf("."); if (atpos

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
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
digital clock with jquery

Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..

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
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
js
get select option form value with jquery

Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..

6:20 am, August 31, 2018
js
jquery jqueryui vue script includes

JQuery 3.2.1 <script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script> jqueryui includes css and js JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/aja..

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
js
jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

6:20 am, August 31, 2018
js
jqueryui date selector

This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..

6:20 am, August 31, 2018
js
using vue and json data

Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..

6:20 am, August 31, 2018
js
jqueryui includes css and js

these ones are useful as well for including jquery ui JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> JQueryUI 1.12.1 min..

6:20 am, August 31, 2018
js
preserve tabs in textarea when tab key is pressed

If you want to have the text tabbed when pressing tab in textareas rather than it switching fields. $(document).delegate('textarea', 'keydown', function(e) { var keyCode = e.keyCode || e.which;..

6:20 am, August 31, 2018
js
using getElementById and innerHTML to change the html of content no jquery

this is pretty simple, but i always forget it so ill add it here document.getElementById("theid").innerHTML = "the new content"; heres how it works, add a div with an id of theid Example .. <d..

6:20 am, August 31, 2018
js
make clickable element with clickable class

makes an element with a link into a clickable element

6:20 am, August 31, 2018
js
jquery document ready

The most used script in jquery, loads things after the document is ready. $(document).ready(function(){ // do some stuff });

6:20 am, August 31, 2018
html
using foundation 6.4 xy grid basics

Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..

6:20 am, August 31, 2018
html
copy image to data uri using chrome base64 encode

Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome. Found this one useful if you want to convert an image to base64 encode and link it directly in css or ht..

6:20 am, August 31, 2018
html
make all links target new window

I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..

6:20 am, August 31, 2018
html
video embed no controls

embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..

6:20 am, August 31, 2018
html
foundation includes cdnjs

Foundation Full Full Foundation CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> Minified Foundation CSS <link rel="stylesheet..

6:20 am, August 31, 2018
css
animate css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> animate.css

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
flex align center vertical horizontal

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

6:20 am, August 31, 2018
css
make your images look non squished when not using image backgrounds

Update: Fixed the code, you can see it here.  i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..

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.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
"We're tight-fisted with property and money, yet think too little of wasting time, the one thing about which we should all be the toughest misers.”
Seneca