Search

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

add the years as dropdown items between a range of years with javascript document ready js only version

get json data with jquery using getJSON

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

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

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

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

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

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

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

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

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:

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

here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..

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

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

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

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

if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..

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

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

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

sometimes i have to do these things when you cant change the source files for some reason, usually due to old code. Its kind of a patch, but it works. The reason i had to add a delay in running the fu..

this uses the jquery attr function to get the value of the href. this example targets the first a in the card div, so running the demo should alert you with https://kruxor.com Rather than using alert..

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.

this function will add a click event to the target if the window size is greater than the target_width

enable and disable an element

showing an example of chevron toggles kinda like a manual accordion

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

Bind something to a click event on an element using jquery. Needs to be combined with a document ready.

this will change the link href target to # on document load rather than its original link

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'] != ..

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

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'), ..

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

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');..

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..