Fixed first column with DataTables
Getting a fixed or frozen first column in a DataTables table that stays in place whilst the user scrolls on the X-axis. This is handy for smaller screen sizes and…
Tag: Web design
JQuery closest and find example
JQuery closest and find example to target and get values where you cannot individually do so i.e multiple elements using the same id/class name. CodePen link. Click the buttons on…
Simple Bootstrap price plan table
An example pricing plan table built with Bootstrap, structured as 3 different tiers it is fully responsive. The CodePen example: See the Pen Bootstrap price plan table by corbpie…
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…
How to build an array with Javascript
Building an array in Javascript and filling a text area with the array and clearing it on button click. CodePen example. To build an array in Javascript you need to…
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…
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…