Currently browsing JavaScript DOM
Friday, May 9, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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.…
Wednesday, April 30, 2025
How to Defer Image Loading with Vanilla JavaScript
It’s well-known that loading an HTML page with over 100 images can significantly slow down the initial render if asset…
Wednesday, April 30, 2025
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…
Wednesday, July 24, 2024
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…
Friday, July 12, 2024
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…
Tuesday, July 2, 2024
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…
Thursday, May 2, 2024
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…
Monday, September 25, 2023
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!
Thursday, May 9, 2024
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…
Wednesday, September 3, 2025
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.…
Tuesday, December 27, 2022
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>…
Monday, July 4, 2022
JavaScript Form Validation
This JavaScript code snippet adds inline validation to any form field (input, select and textarea). Feel free to customise it…
Tuesday, May 7, 2024
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.
Friday, June 3, 2022
JavaScript Bookmarklets Collection
Bookmarklet 1: Show Password A simple JavaScript snippet can be used to view passwords in web browsers. To use the code,…
Tuesday, May 2, 2023
How to copy web page content using innerHTML
I need to extract some data from a web page and place it on a fishing site. The source web…
Tuesday, May 17, 2022
Random JavaScript Tutorials
I needed some structural updates for a site, and among them, I added some JavaScript snippets. I will show you…
Wednesday, April 30, 2025
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…
Friday, June 3, 2022
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…
Monday, May 16, 2022
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…
Wednesday, May 8, 2024
Tiny confirmation modal dialog in Vanilla JavaScript
A new addition to my Thin UI library, a much-needed modal dialog (popup dialog), this script is tiny, and it…
Monday, May 16, 2022
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.…
Friday, May 20, 2022
JavaScript Drag & Drop
Here’s a nice list of plain JavaScript dragging and dropping solutions. They are minimal, as they serve as proof of…
Monday, May 16, 2022
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…
Wednesday, January 14, 2026
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…
Wednesday, May 8, 2024
How I Created My Homepage JavaScript Post Carousel
My homepage now features a JavaScript section of 4 featured posts. Notice the official JavaScript yellow colour? Here’s how I…
Monday, May 16, 2022
tail.select takeover and update
I have been using the tail.select library on 200+ WordPress websites for more than 2 years. That number is growing,…
Monday, September 22, 2025
tail.select
HTML Select Fields as beautiful as never before tail.select is back: Create beautiful, functional and extensive (Multi) Select Fields with…
Monday, June 24, 2024
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…
Tuesday, December 5, 2023
How to Get and Set Query Parameters From URL
Here are two ways to get (and set) query parameters from URL. I’ll add some real life examples in order…
Tuesday, August 2, 2022
How to Create a Price Range Slider Using Vanilla JavaScript
All JavaScript range sliders are hacks or workarounds. Because there’s no native HTML element for a range slider (only a…
Monday, May 16, 2022
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…
Tuesday, June 18, 2024
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…
Wednesday, January 18, 2023
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.
Thursday, November 2, 2023
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…
Monday, June 13, 2022
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…
Monday, May 16, 2022
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…
Friday, June 3, 2022
How to Change Page Title Using JavaScript
This JavaScript will modify the text of the browser tab when a visitor focuses or unfocuses the tab. You can…
Monday, May 16, 2022
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…
Monday, May 16, 2022
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…
Wednesday, April 30, 2025
Native JavaScript hasClass()
These JavaScript snippets implement a native hasClass() function, which checks if an element has a certain class. A prototype approach…
Monday, May 16, 2022
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…
Tuesday, December 5, 2023
How to hide an element using JavaScript
Here are 3 methods to hide an element using JavaScript. How to hide an element using JavaScript? Set native display…
Monday, May 16, 2022
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…