Product filter by size example with jQuery
How to apply a product filter for sizes using checkboxes and jQuery/javascript. Live page filtering without a refresh can be done upon interaction with checkboxes that can apply an array…
Tag: HTML
noUiSlider multi range slider example
A noUiSlider multi-range HTML slider complete with the slider values outputted into the HTML. noUiSlider is a minimal Javascript range slider framework with a convenient API. CodePen example. You will…
jQuery select closest text and input values example
Using jQuery to select text and input values based on closest parameters. CodePen example. closest() will get the first element matching by traversing up, whilst find() will descend until the…
Moving gradient text with CSS
Some simple animated gradient text with CSS which is more attention-grabbing than just plain, stationary coloured text This method utilizes the CSS animation property. CodePen link. The CSS h1 {…
Bootstrap sticky first column, horizontal scrolling table
Making a horizontal scrolling table where the first column is sticky and stays in place. Tables are fine to an extent but once you start having more than a few…
Vanilla Javascript basics; Adding and removing classes
Adding and removing classes to HTML elements with vanilla Javascript. Also included is a toggle and replace method. Adding a class name to an element with classList.add() document.getElementById(“theId”).classList.add(“green-text”); Add multiple…
Vanilla Javascript basics; Selecting elements based on id or class
Doing vanilla Javascript selecting or setting elements with their id or class name. Selecting Selecting a HTML element with its id with getElementById(): document.getElementById(“theId”); Selecting an element based on the…
Making Bootstrap modals wider
Bootstrap modals come in 4 sizes, You have the default, small, large and extra-large. The default size is closer to small and often at times in usage feels very restricted…
Setting HTML date input value
How to set the default value to a HTML date input using vanilla JS or jQuery, including a method to set the date to be 1 month from now. The…
Show & hide Bootstrap modal with jQuery
Opening and closing a Bootstrap modal using the traditional button method and then with jQuery targeting with a button click. CodePen example. Traditional way Opening (showing) the modal the traditional…