Currently browsing JavaScript DOM
Manipulate web pages dynamically with the Document Object Model (DOM). Tutorials cover selecting and traversing elements, creating and removing nodes, handling events, and updating content and styles on the fly. Learn the vanilla JavaScript techniques for building interactive, responsive interfaces without a framework.
Implementing Custom Tooltips with Vanilla JavaScript
The following script replaces the native browser tooltip with a custom-styled tooltip that appears when hovering over elements with the…
Enhancing <select> Dropdowns: Removing Duplicates and Sorting Options with Vanilla JavaScript
When working with <select> dropdowns in HTML, it’s common to encounter scenarios where you need to remove duplicate options or…
Sorting and Ordering Elements Based on Data Attributes with Vanilla JavaScript
Sorting elements on a webpage can be a critical feature when you need to reorder content dynamically. Whether it’s based…
Trigger an Event When User Reaches the Bottom of the Page
In a previous project, a client requested an action to be performed when the user scrolled to the bottom of…
Generate a Password Using Vanilla JavaScript
Enforcing strong passwords can be challenging, but by providing users with an automated password generation feature, you can enhance both…
Equal Height for All Elements Using Vanilla JavaScript
In my ImagePress plugin, we needed to ensure that all boxes have the same height after they have been loaded.…
Dropdown Autocomplete with contenteditable Fields
Autocomplete for contenteditable Fields Using Vanilla JavaScript If you’ve ever needed to implement autocomplete functionality in a contenteditable field or…
Animated JavaScript Counter-Up with the Intersection Observer API
An animated counter is a more engaging way to present this information, as it gradually increases the value of the…
How to Build a Vertical Off-Canvas Menu Bar Using JavaScript and CSS
In my work, coming up with fresh navigation ideas and creating an intuitive and efficient navigation system is essential for…
How to Build a Double Off-Canvas Menu Using JavaScript
Creating a double off-canvas menu can greatly enhance the user experience by providing accessible navigation options without occupying valuable screen…
How to Lazy Load Google Map Iframe Embed in WordPress
If you embed a Google Map iframe on your WordPress website, you may notice an increase in the total webpage…
Segmented Horizontal Bar Chart (Graph) Using Vanilla JavaScript
If you're looking to create a segmented (stepped) horizontal bar chart using nothing but vanilla JavaScript, you're in luck!
SEO Crawlability Issue: Resources are formatted as page link
While working on a SEMrush audit, I found a new type of crawlability notice: 47 resources are formatted as page link…
StackGrid — A Light Vanilla JavaScript Masonry Grid
Introducing the lightest and most efficient Masonry grid available — StackGrid — powered by pure vanilla JavaScript, no dependencies required.…
How to Open Only One Details/Summary Element at a Time
Let’s suppose you want to build a simple accordion or a help section, and you want to use a <details>…
JavaScript Form Validation
This JavaScript code snippet adds inline validation to any form field (input, select and textarea). Feel free to customise it…
Why I removed my dark theme switcher
How I implemented a dark/light theme switcher using JavaScript and CSS for both WordPress and static websites.
JavaScript Bookmarklets Collection
Bookmarklet 1: Show Password A simple JavaScript snippet can be used to view passwords in web browsers. To use the code,…
Random JavaScript Tutorials
I needed some structural updates for a site, and among them, I added some JavaScript snippets. I will show you…
How to check scroll depth using JavaScript
Tracking how far users scroll down a webpage can provide valuable insights into content engagement. By monitoring scroll depth milestones—such…
How to create a simple JavaScript percentage graph (or chart)
This small JavaScript snippet creates percentage graphs out of raw (array) data. Just input the name/value pairs of the involved…
Vanilla JavaScript table date sorting
Say we have a table with dates, in the following format: We want to sort this table dynamically based on…
How to add a top bar countdown for your next product sale
You can (probably) see this top bar right now, with a nice 30% off sale for my WordPress Lighthouse plugin.…
JavaScript Drag & Drop
Here’s a nice list of plain JavaScript dragging and dropping solutions. They are minimal, as they serve as proof of…
JavaScript Character Counter for Text Areas
A while ago, I had to implement a character counter for a business listing directory. The description field was supposed…
Carbon: Basic Syntax Highlighting with Zero Overhead Using JavaScript
If you have ever used PrismJS or CodeMirror or any other syntax highlighter solution, you’ll know it adds lots of…
tail.select
HTML Select Fields as beautiful as never before tail.select is back: Create beautiful, functional and extensive (Multi) Select Fields with…
How I added a neat effect in 30 lines using IntersectionObserver
This is something I’ve always wanted to add to my theme, but I was afraid of the impact on the…
How to Create a Price Range Slider Using Vanilla JavaScript
Part of the vanilla JS sliders & carousels guide. See also: How to Create a Draggable Carousel Using Vanilla JavaScript…
How to Create a JavaScript Typewriter Using Vanilla JavaScript
This was done for a client, and I do not recommend it as it uses setTimeout(). Anything using setTimeout() or…
Drift Chat: Speed Up Your Page Loading Speed by 3-4 Seconds
Here’s a neat trick to speed up your initial page loading time when you are using Drift. If you use…
24-Hour Countdown with Progress Saving Using Vanilla JavaScript
Here’s an interesting JavaScript snippet allowing you to set a 24-hour countdown and save its progress between page loads.
Random Imgur Images Using Vanilla JavaScript
I found this old code I used for an old forum a long time ago, and I decided to bring…
How and why I added a circle following my mouse pointer
I’ve seen this behaviour on several Russian sites, and it looked really slick, especially when the movement was delayed compared…
Switching From JavaScript to PHP for Browser Detection and Avoiding Core Web Vitals Penalties
In the light of the recently introduced Core Web Vitals, I decided to save some script start-up speed and switch…
How to track and measure phone number views with JavaScript
Use this tutorial to create phone number links and track/measure views. As phone numbers are clickable (and work) only on…
How to show an outdated browser alert on Internet Explorer 11
Here’s a nice overview on why Internet Explorer 11 should be phased out and users blocked from viewing the site…
How to extract a value from an element and, optionally, round it
This JavaScript snippet will extract a price from a DOM element, remove all alphanumeric characters, such as currency or symbols…
How to Create a Programmatic JavaScript Tooltip
Here’s a short tutorial on how to create a programmatic JavaScript tooltip. I needed this feature to recreate a product…
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…
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…
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…
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…
DragonflyJS – Vanilla JavaScript Drag and Drop
DragonflyJS is a tiny vanilla JavaScript library that enables sorting (dragging and dropping) functionality with zero dependencies.
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…
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…
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…
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…