Currently browsing JavaScript

Thursday, June 23, 2022

Experiment: JavaScript Boxed Carousel with Progress Indicator

Here's an awesome JavaScript carousel built for a client project, but then scrapped. It definitely has potential for unlimited items.…

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 Populate OpenStreetMap with Foursquare Venues/Amenities

First of all, we need a Foursquare app and a client ID and secret. Head over to developer.foursquare.com and get…

Monday, May 16, 2022

WordPress Responseless XHR Request Using JavaScript

A responseless XHR (POST) request is a request which does not require any user feedback, such as storing post views…

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

End of an Era: Travel SEO

I’ll just leave this here for reference purposes and I won’t explain any code, as it’s obsolete and I’m not…

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…

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 Get and Set URL Parameters with JavaScript

This is an old script, which helped a lot with the initial phase launching a project on all browsers and…

Wednesday, April 30, 2025

How to Build a Vanilla JavaScript Slider in Less Than 100 Lines

This quick tutorial will show you how to create a basic slider in less than 100 lines. The actual JavaScript…

Monday, May 16, 2022

How to Implement a Service Worker in Your Website and How to Create a Basic PWA

You definitely don’t need a plugin for this. Although there are plugins which help with creating a service worker and…

Wednesday, April 30, 2025

A Trio of Approachable Vanilla JS Sliders

This post has been superseded by How to Build a Vanilla JavaScript Slider in Less Than 100 Lines. The past…

Monday, May 16, 2022

Cross-browser Query Parameter Getter and Setter

Here’s a cross-browser compatible way of getting query parameter from a URL or setting query parameters and reloading the page. An…

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

Passing Arguments to External JavaScript Files

This post covers the topic of passing arguments to external JavaScript files. I want to say up front that there…

Monday, June 12, 2023

JavaScript Data Types

Every variable in JavaScript has a data type which dictates the values that can be stored in it. However, JavaScript…

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…

Monday, May 16, 2022

Convert jQuery.get() to Vanilla JavaScript

In the latest iteration of my YouTube Playlist Player plugin, I decided to remove all jQuery dependencies. I replaced the…

Monday, May 16, 2022

How to Compare Version Numbers in JavaScript

The basic idea to make this comparison would be to get arrays of parts from the version numbers and then compare pairs…

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…

Wednesday, April 30, 2025

How to replace jQuery.ajax() with vanilla JavaScript in WordPress

In an effort to remove all jQuery dependency from one of my plugins, I decided to turn all jQuery.ajax() requests…

Monday, May 16, 2022

Useful JavaScript String Prototypes

This is a function to remove all double whitespaces and preceding line breaks. This is a function to replace all line…

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…

Tuesday, October 24, 2023

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

truthy and falsy in JavaScript

In JavaScript, any variable can be used in a logical context, such as the condition of an if statement or…

Monday, May 16, 2022

A JSON Overview

JavaScript Object Notation, or JSON, is a plain text data interchange format. It is based on a subset of the third…

Tuesday, June 14, 2022

Native Browser Support for JSON

JavaScript Object Notation, or JSON, is a text format used to represent JavaScript objects as strings. Like other text formats,…

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…

Wednesday, June 15, 2022

Promises in JavaScript

Writing code in an async programming framework like node.js becomes super complex and unbearably ugly, superfast. You are dealing with…

Monday, February 27, 2023

Custom Events in JavaScript MVC

Events are the bread and butter in UI development. They are frequently used to kick off JavaScript to deal with…

Tuesday, May 10, 2022

Cutting Loose: Dynamic Namespacing in JavaScript

Most of the JavaScript libraries come wrapped in an easy to refer single object. The object acts as a namespace,…

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

Understanding JavaScript Currying

I recently fully understood the concept of utilizing Currying in JavaScript. The core concept can be grasped from these references: Wikipedia entry on…

Tuesday, May 10, 2022

How and Why to Avoid ‘for’ Loops

Never again use for() for looping. Using for() can be dangerous, especially if you use a library which adds attributes…

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

Wednesday, April 30, 2025

John Resig’s Inheritance

John Resig, the creator of jQuery, has created this JavaScript inheritance code. I am still using it now to simplify several…

Tuesday, May 10, 2022

Encapsulation: Private Attribute

In JavaScript OOP there are attributes called private attributes. Knowing if an attribute is private or public, an API user…

Wednesday, April 30, 2025

Encapsulation: Private and Public Methods

When it comes to developing APIs, self-documenting code is very important, as it simplifies the user’s effort in filtering the…

Page 3/41234