Currently browsing JavaScript DOM
Tuesday, May 17, 2022
How to create a YouTube video cover using the YouTube Iframe API
There’s an increasing trend of adding full-width (possibly full-height) YouTube video covers with autoplay. Using the YouTube Iframe API, this…
Monday, May 16, 2022
How to Autoplay a Video Element Using JavaScript
The latest Chrome version has stopped video autoplay if the video is not muted. Firefox and the other browsers will soon…
Monday, May 16, 2022
Native JavaScript Drag&Drop Upload
Modern browsers allow you to define native dragging & dropping functionality with a graceful degradation for older/ancient browsers, such as…
Monday, May 16, 2022
Building a Simple Tab Strip using Vanilla JavaScript
I recently developed a simple tab strip using only HTML, CSS, and vanilla JavaScript. The script does not require any…
Wednesday, April 30, 2025
DOM ready functionality using vanilla JavaScript
This is a reliable way of checking for DOM ready. The first version uses a procedural function, while the second…
Tuesday, August 20, 2024
DragonflyJS – Vanilla JavaScript Drag and Drop
DragonflyJS is a tiny vanilla JavaScript library that enables sorting (dragging and dropping) functionality with zero dependencies.
Monday, May 16, 2022
How to Implement jQuery slideToggle() in Vanilla JavaScript
If you use jQuery for a handful of effects/animations, here’s a quick JavaScript replacement for jQuery slideToggle(). With small changes,…
Monday, May 16, 2022
How to Create a GDPR Modal Popup Using RoarJS
The script below will check for a localStorage variable, which is the explicit user consent. If the variable exists, the…
Wednesday, May 8, 2024
RoarJS – JavaScript Alert/Confirm Replacement
RoarJS is a wonderful, responsive, customisable, accessible (WAI-ARIA), zero-dependency, vanilla JavaScript alert/confirm replacement. RoarJS automatically centers itself on the page…
Monday, May 16, 2022
How to Create an Internationalisation System Using JavaScript
Creating an i18n system in JavaScript can be tricky. The most popular option is to use global variables, but it…
Monday, September 22, 2025
Client-Side JavaScript Pagination
Server-side pagination is needed when you have to display hundreds of records. You may fetch results from a database using…
Monday, May 16, 2022
A Quick Introduction to Custom Data Attributes and Vanilla JavaScript
For years, developers have needed a method for adding their own metadata to HTML elements, but no standardized technique existed.…
Tuesday, May 10, 2022
JavaScript Selectors API
Dealing with the DOM can be a very tedious process. Traversing the DOM can quickly clutter your code with nested loops. For…
Tuesday, May 10, 2022
Image Beacons
Using image beacons is one of those popular techniques that you would probably know about without knowing its name. The technique helps…
Tuesday, May 10, 2022
JavaScript Random String Generator
I needed a random string for various purposes. For example, to provide a unique ID to HTML elements via JavaScript.…
Tuesday, May 10, 2022
Load a JavaScript File on the Fly
Similar to my previous article on how to add/inject a CSS stylesheet using Vanilla JavaScript, this is how you load…
Monday, September 22, 2025
Generate HTML List From JavaScript Array
Generate an HTML list based on the contents of a JavaScript array. By modifying the makeList() function to accept parameters…
Tuesday, May 10, 2022
How to Add a CSS Stylesheet in Vanilla JavaScript
The function below will dynamically inject a CSS stylesheet in the document's using Vanilla JavaScript (no dependencies).
Wednesday, April 30, 2025
How to Make an Iframe Responsive Using JavaScript
Stubborn iframes can be tamed using a simple JavaScript trick and a couple of code tweaks. Use the code below…
Tuesday, August 22, 2023
Pure JavaScript tabbing functionality with linkable tabs
This script shows you how to create vanilla JavaScript tabs anywhere, physically linkable without any external JavaScript library. 305 bytes…
Wednesday, April 30, 2025
How to dynamically append a CSS file
This code snippet allows you to dynamically append a CSS file to your document's head. It can be used inside…
Wednesday, April 30, 2025
JavaScript Credit Card Validation
This is a collection of JavaScript snippets to validate credit card details without requiring any library. Feel free to customise…