Loading Javascript files after page has finished loading
How to load a javascript file only once the page has finished loading. This is done with a document event listener that will run when the content has been fully…
Tag: Web design
Live time and date with vanilla Javascript
A live and active time and date with vanilla Javascript. CodePen example. Start by setting variables for the date string: var today = new Date(); var day = today.getDate(); var…
Change progress bar colour based on progress value
Changing a progress bar colour based on what value its progress is at. This is done using jQuery and the default Bootstrap colour classes. CodePen example. The jQuery: $(document).ready(function ()…
jQuery autocomplete input example
How to do a jQuery autocomplete input element from an array source. autocomplete gives the ability to find and select from a compiled list of values, helping aid searching. CodePen…
Draggable Bootstrap grid with order saving
A draggable Bootstrap grid that will save the order for future usage. The drag feature is implemented with gridstrap.js. The concept being on page load get the grid order from…
jQuery show, hide, remove and create element example
Using jQuery to show, hide and remove HTML content as well as the differences between using hide and remove. Hide In jQuery hide() sets the element to display: none; meaning…
Button click to fade in and out content with jQuery
Example of button click to fade in and out content with toggle state using jQuery. CodePen example. Firstly a couple of functions: The fade out and remove the element function:…
HTML MySQL Table edit with no page reloading via Ajax
An example of updating or editing an HTML table from MySQL data without reloading or changing pages thanks to Jquery and Ajax. The Ajax requests are done API style to…
Infinite scrolling with AJax calls
A working example for an infinite scrolling page with a Jquery Ajax request. Upon reaching the bottom of the page the Ajax call function is used to retrieve random words…
Displaying data from MySQL without a page reload using Ajax
Displaying data from MySQL without reloading the page can be done with an on-click event which does an Ajax request that then fills elements with the returned data. This is…