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…

Friday, July 12, 2024

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, August 21, 2024

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,…

Thursday, January 30, 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…

Page 1/212