List Code
responsive viewport meta tag (responsive meta tag)
this one meta tag will make the page appear correctly on mobile devices. You may need to do other things to get all the other elements to fit. Here is the one I usually use <meta name="viewport" ..
youtube embed no controls auto play iframe
Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..
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..
lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praes..
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..
youtube extract thumbnail from video link
Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https:/..
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..
meta refresh reload page
this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..
layout homepage
just some experiments external link
random emojis copy and paste
Update: this is a better list that you can search by title ctrl + f emoji data Sometimes i like to copy and paste emojis, so here is a few you can copy. I probably need to organise this som..
link to an external stylesheet
Not sure why but i always forget this, how to link to an external stylesheet. <link rel="stylesheet" href="../css/margin padding.css">
form elements australian state list
A list of the Australian States converted into a form element select option dropdown. Sorted in alphabetical order.
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
make any element editable
not sure if this will work on "all" or "any" elements, but it works on p tags. demo Type whatever you like here. code <p contenteditable="true" style='font-size:30px;'>Type whatever ..
jquery document ready
The most used script in jquery, loads things after the document is ready. $(document).ready(function(){ // do some stuff });
make clickable element with clickable class
makes an element with a link into a clickable element
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..
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;..
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..
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 ..
jqueryui date selector with examples and code
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..
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..
fancybox youtube showing video links in a lightbox
Updated version with code here 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..
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..
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 ..
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..
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..
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..
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..
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..
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..
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..
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..
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..
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
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..
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..
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..
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. tags: ..
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..
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..
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..
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..
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..
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..
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..
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..
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/..
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..
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..
