Currently browsing JavaScript DOM
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.…
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…
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,…
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…
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…
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…
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…
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…
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,…
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 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…
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…
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 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…
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…
Native JavaScript hasClass()
These JavaScript snippets implement a native hasClass() function, which checks if an element has a certain class. A prototype approach…
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 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…
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…