Ajax loading spinner example with Bootstrap
How to do a progress loading spinner whilst waiting for an Ajax call/request. This can prevent the awkward blank page whilst loading in elements from an HTTP GET request. CodePen…
Tag: Web Dev
Building a URL with vanilla Javascript from select inputs
A dynamic URL builder using select inputs and vanilla Javascript. CodePen example: See the Pen Vanilla Javascript URL builder from inputs by corbpie (@corbpie) on CodePen. Setting the select…
Getting MySQL table column names, types and more as JSON
How to get information in JSON format about a MySQL table. INFORMATION_SCHEMA has information about the metadata of the database structure such as column types, defaults, lenghts and keys. To…
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…
typeahead.js autocomplete with two-dimensional array Ajax call
Using the typeahead.js library to create an autocomplete input from a two-dimensional array that was fetched with an Ajax request. typeahead.js is created by Twitter to “provide a strong foundation…
Bootstrap 5 accordion catch hide and show events
How to catch and handle the show and hide events on the Bootstrap 5 accordion component. An accordion is a show/hide card that collapses or expands when clicked, it is…
Highlight max and min column with DataTables
Highlighting the max and min column in a table made with DataTables. Using the initComplete option to call a function that sorts each column into an array and then check…
Using the NBA schedule API with PHP
How to access and filter through the NBA schedule API for season 2021-22 using PHP. This is not the only way and endpoint to get the NBA schedule however since…
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…
Apex Charts temperature line chart example
Creating a temperature gradient line chart with Apex Charts. The hotter the temperature value the redder it is, whilst colder means blue. What starts as a basic line chart changes…