List Code
Slick Slider Carousel
Edit: Sorry this page was broken for a bit, its fixed now with working examples! đ Nice and simple slider / carousel
add this
To Add: https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON
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..
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..
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/..
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..
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..
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..
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..
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..
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..
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..
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..
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: ..
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..
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..
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..
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
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..
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..
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..
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..
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..
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..
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..
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..
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..
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 ..
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..
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 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..
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..
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 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..
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;..
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..
make clickable element with clickable class
makes an element with a link into a clickable element
jquery document ready
The most used script in jquery, loads things after the document is ready. $(document).ready(function(){ // do some stuff });
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 ..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
form elements australian state list
A list of the Australian States converted into a form element select option dropdown. Sorted in alphabetical order.
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">
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..
layout homepage
just some experiments external link
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 ..
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..
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:/..
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..
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..
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..
