Creating custom Feather icon sizes
Feather icons is a large open-source collection of SVG icons to use on the web. Usage is easy and requires just one file request. By default, there are no size…
Tag: HTML
Updating an input value from a jQuery slider
Live update an input value when sliding a jQuery Ui slider and set the slider value when the input is interacted with. The CodePen example: See the Pen by corbpie…
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…
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…