The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact with the Document Object Model (DOM) of the page.
Get dom element height in JavaScript
5 Nov, 2024
Get the total height of an element, optionally including its margins.
JavaScript: get char count from the end of a string
17 Oct, 2024
You can count the asterisks at the end of a string, in JavaScript, using this snippet. This uses match() with the regex \*+$ to find the sequence of asterisks at the end of the string. If there's a...
Dialog form fieldsets to show in columns not rows in CKEditor 4
13 Sep, 2024
Instead of stacking elements vertically in rows, we use an hbox layout, which arranges the child elements horizontally (in a single row). hbox is CKEditor's way of arranging elements in a horizontal...
Append to HTML with JavaScript
13 Sep, 2024
To append content to an HTML element using JavaScript, you can use appendChild() for DOM elements or innerHTML for strings.
JSHint: Expected an identifier and instead saw ']'.(E030)
6 Sep, 2024
The JSHint error "Expected an identifier and instead saw ']'. (E030)" usually occurs when there is a syntax issue in your JavaScript code involving square brackets ([]). The least obvious is that you...
CKEditor 4: Add edit button to context menu
6 Sep, 2024
This code snippet adds a custom "Edit" button to the CKEditor context menu, specifically for a widget with the class "my-widget." It first creates a new menu group called myWidgetGroup and then...
CKEditor 4: Save dialog form data/state
6 Sep, 2024
The example contains a CKEditor 4 widget with a dialog that allows users to edit widget properties. The dialog loads existing widget data into form fields. When the dialog is submitted, the form data...
Parse Url in JavaScript
22 Aug, 2024
To parse a URL in JavaScript, you can use the built-in URL object. This provides an easy way to extract and manipulate different parts of a URL.
Filter Array of Objects Based on an Array of IDs in JavaScript
16 Aug, 2024
To filter a list of objects based on a list of IDs in JavaScript, you can use the filter method combined with the includes method. First, you have an array of IDs and another array of objects where...
Get path from url in JavaScript
10 Aug, 2024
To add a path to an existing URL in JavaScript, you can use the URL object and its methods.
Trim whitespace in JavaScript
10 Aug, 2024
In JavaScript, you can trim whitespace from the beginning and end of a string using the trim() method. This example shows you how it will remove any leading and trailing whitespace characters (spaces...
Check if object parameter is defined in ES6
6 Aug, 2024
The simplest way, but this approach only works if you are sure that the values of test.test and test.test2 are not falsy (i.e., not 0, null, undefined, false, NaN, or an empty string ''). If you need...
Check for empty object in JavaScript
6 Aug, 2024
To check if an object is empty in JavaScript, you can use several methods. You might prefer using Object.keys() to check if an object is empty because it offers clarity, readability, and conciseness...
Iterate array in JavaScript or ES6+
6 Aug, 2024
The forEach method is preferred in JavaScript for its readability and simplicity. It provides a more concise and clear way to iterate over arrays compared to traditional loops, avoiding the need for...
querySelector to test against the root element in JavasScript
6 Aug, 2024
Instead of querySelector you should use matches(). The matches() method in JavaScript is used to determine if an element would be selected by a specified CSS selector. This method returns true if the...
Convert object to array in JavaScript
19 Jul, 2024
In JavaScript, you can convert an object to an array in several ways depending on what part of the object you want to convert (keys, values, or entries). You can add a check to ensure that the...
Order objects in array by property in JavaScript
12 Jun, 2024
In JavaScript, you can sort arrays of objects by a specified property using custom functions that handle both string and integer properties, and can sort in either ascending or descending order. The...
Vanilla JavaScript trigger click event
24 Feb, 2024
To trigger a click event using vanilla JavaScript, you can use the click() method on the element you want to simulate a click for. For more information: https://developer.mozilla.org/en-US/docs/Web/...
Iterate objects in JavaScript
21 Feb, 2024
In JavaScript, for iterating over objects, I recommend using the Object.entries() method, introduced in ECMAScript 2017 (ES8) and supported by modern browsers. This method provides key-value pairs in...
Deep merge in JavaScript
21 Feb, 2024
Deep merging in JavaScript refers to the process of merging two or more objects deeply, ensuring that nested structures, including arrays, are merged recursively. While JavaScript provides the spread...
Remove all but first n array items in JavaScript
10 Feb, 2024
To remove all but the first n elements from an array in JavaScript, you can use the splice() method or array slicing. The splice() method in JavaScript is used to change the contents of an array by...
JavaScript one-liner to get unique array values
9 Feb, 2024
This snippet uses a combination of Set and Array.from() to filter out duplicate values and convert the result back into an array. When you initialize a Set with an array, it automatically removes any...
JavaScript: Get index by value in array
9 Feb, 2024
In JavaScript, if you want to get the index of an element in an array based on its value, you can use the indexOf() method. If the value is not found in the array, the indexOf() method will return -1...
Element scroll offset in JavaScript
7 Feb, 2024
This code snippet demonstrates how to retrieve the horizontal (x) and vertical (y) scroll coordinates of an element using the scrollLeft and scrollTop properties, respectively. One common use case...
JavaScript: Move all elements from a div to another div
7 Feb, 2024
In this snippet we move/clone dom elements with all children for later usage.
Get last item of array in JavaScript
31 Jan, 2024
This snippet explains how to get last item of an array. The example retrieves the last item of the array by determining its index through subtracting one from the array's length. This approach...
Vanilla JavaScript equivalent of jQuery addClass
20 Jan, 2024
The addClass function in jQuery and the classList.add method in vanilla JavaScript both serve the purpose of adding one or more CSS classes to HTML elements. jQuery's addClass is succinct and...
Vanilla JavaScript equivalent of jQuery show/hide
20 Jan, 2024
To achieve a show/hide functionality in vanilla JavaScript equivalent to jQuery's show() and hide() functions, you can utilize CSS classes or inline styles. In the example provided, a CSS class named...
Vanilla JavaScript equivalent of jQuery selector
20 Jan, 2024
The difference between querySelectorAll in vanilla JavaScript and jQuery's selector lies in their syntax and underlying implementation. querySelectorAll is a native JavaScript method that allows for...
JavaScript: recur every minute
20 Jan, 2024
If you want to make a function or a piece of code in JavaScript execute every minute, you can use the setInterval function. The setInterval function in JavaScript is used to repeatedly execute a...
JavaScript: get group that contains item in a grouped array
15 Jan, 2024
You have an original array and another array where the elements are grouped in threes. You want to find the group in the second array that corresponds to a given element from the original array.
Split array to groups of 3 in JavaScript
15 Jan, 2024
Split array to groups of 3. For convenience there are two methods. Both variations achieve the task of splitting an array into groups of three elements in JavaScript. The first variation uses a more...
Redirect to another page with JavaScript
11 Jan, 2024
JavaScript redirection, exploring the different methods and scenarios where it can be applied. Whether you prefer a silent redirect or a documented exploration of pages, these snippets provide the...
Parse an HTML string with JavaScript
11 Jan, 2024
DOMParser API provides a more flexible way to parse HTML strings into a document object, facilitating efficient manipulation and extraction of information within a web page. After which you can use...
Get attribute value from getElementsByTagName()
11 Jan, 2024
To retrieve the value of an attribute using getElementsByTagName() in JavaScript, you first use the document.getElementsByTagName("tag") method, replacing "tag" with the HTML tag of the elements you'...
Last element of array in JavaScript
2 Jan, 2024
Accessing the last element of an array in JavaScript, as demonstrated by the code snippet, is a fundamental technique for practical programming tasks. It allows you to retrieve and utilize the latest...
Count object keys in javascript
23 Nov, 2023
In JavaScript, you can count the number of keys in an object using the Object.keys() method and then .length is used to get the number of keys in the object.
JavaScript event when pressing escape key
7 Nov, 2023
Capturing the "Escape" key press with an event listener is a common practice in web development, especially for modals or dialogs. Example useful cases of using the event: It provides a better user...
Three dots add objects together (spread operator)
19 Oct, 2023
You can use the spread operator (...) to add objects or merge them together. This operator allows you to copy the properties of one object into another. The code always creates a new object. In this...
Get body tag/element in JavaScript
7 Oct, 2023
You don't have to find the body by tag name. This code will give you a reference to the element of the current HTML document, which you can then manipulate or access as needed in your JavaScript...
isset() equivalent in JavaScript
7 Oct, 2023
In JavaScript, there isn't a built-in isset() function like you might find in some other programming languages. However, you can check if a variable is defined or not by using conditional statement.
CKEditor 4 allowedContent link
5 Aug, 2023
The allowedContent configuration option in CKEditor is used to define what HTML elements and attributes are allowed to be used in the editor's content. This feature helps maintain consistent and safe...
Use keydown instead of keyup to prevent scrolling with space-bar
25 Jun, 2023
To prevent scrolling with the spacebar using the keydown event instead of keyup, you can listen for the spacebar key using JavaScript and prevent the default behavior of the key if it is pressed down...
Vanilla JavaScript equivalent of jQuery :visible
25 Jun, 2023
In jQuery, the :visible selector is used to select elements that are currently visible on the web page. The code snippet checks if an element has a non-zero width, a non-zero height, or non-zero...
Vanilla JavaScript equivalent of jQuery each
14 May, 2023
In jQuery, you can use the $.each() method to loop through a collection of elements or objects. In vanilla JavaScript, you can achieve the same functionality using the forEach() method, which is...
Vanilla JavaScript equivalent of jQuery parent
14 May, 2023
To use these, you first need to get a reference to the child element whose parent you want to get. You can use a method such as getElementById(), querySelector(), or getElementsByClassName() to get a...
Vanilla JavaScript equivalent of jQuery hasClass
14 May, 2023
Both the native JavaScript and jQuery methods achieve the same result of checking whether an element has a particular class. However, the syntax and implementation are different between the two. In...
Get current focused element in JavaScript
14 May, 2023
When developing a webpage or web application, it can be useful to know which element is currently in focus. This information can be used to provide visual feedback or to perform actions based on the...
Vanilla JavaScript equivalent of jQuery text
17 Feb, 2023
The Vanilla JS equivalent of jQuery's text() method would be to set the textContent property of a DOM element.
Vanilla JavaScript equivalent of jQuery css
17 Feb, 2023
In jQuery, you can set CSS properties on an element using the css() method. To achieve the same thing in vanilla JavaScript, you can use the style property of the element.
Vanilla JavaScript equivalent of jQuery attr
17 Feb, 2023
In jQuery, the attr method is used to get or set the value of an attribute for an element. In vanilla JavaScript, you can use the getAttribute and setAttribute methods to achieve the same...
Vanilla JavaScript equivalent of jQuery click
13 Jan, 2023
In vanilla JavaScript, the equivalent of the jQuery click function would be the onclick property. The onclick property in JavaScript is an event property of HTML elements that allows you to specify a...
in_array equivalent in JavaScript
12 Jan, 2023
In JavaScript, the equivalent of the PHP function in_array() is the includes() method, which is used to check if an array contains a certain value.
Copy text to clipboard in JavaScript
2 Jan, 2023
Certainly! Copying text to the clipboard in JavaScript can be accomplished using the Clipboard API. This API allows web developers to interact with the user's clipboard, allowing them to read from...
Vanilla JS equivalent of jQuery prepend
2 Jan, 2023
Insert content to the beginning of an element. Vanilla JS equivalent prepends to a single element, to prepend to multiple elements you need a loop. Same applies to append.
Vanilla JS equivalent of jQuery find
30 Dec, 2022
The Vanilla JavaScript equivalent of jQuery's .find() method is the .querySelectorAll() method. The function allows us to search through the descendants of these elements in the DOM tree and...
Javascript: object keys and values to html table
14 Jun, 2021
Convert javascript object into html table, where keys are in the first column and values are in the second column. This uses plain javascript so you can use it anywhere.
Explode / split string in ES6
15 Jul, 2020
How to split string in ES6. I would suggest the method of using split function from lodash. In modern JavaScript frontend you use a lot of dependencies and lodash is used in almost every project....
Validate Date in JavaScript
15 Apr, 2020
How to find out if a Date is indeed a valid Date. Simply instance check will not do it, the date might be "Invalid Date".
Create and Post HTML Form using Javascript
20 Mar, 2019
This snippet creates html form and submits it, the same way as browser submits form "with redirect". If you need the redirect not an ajax solution, for example credit card payment.
Convert to Integer in JavaScript
8 Nov, 2018
There are multiple ways to convert values to integer in javascript. Using Math.trunc gives the most accurate results.
Webpack: Remove comments from compressed css
1 Jun, 2017
You can minify css with optimize-css-assets-webpack-plugin, but by default some comments are left untouched. If you want to remove all comments you have to use an option for the cssnano, that is used...
Javascript: move item to end of array (of objects), by property value
29 May, 2017
The snippet shows how to move item to the end of array. In a case where we have an array of objects and we want to move the array item by property value. In this example I am using lodash/underscore...
JavaScript ES6: Clone Object or Array
13 May, 2017
Whether you're using vanilla JavaScript or popular frameworks like React, the ability to create deep copies of objects proves invaluable. Take control of your data structures, sidestepping unintended...
webpack: Minify CSS in production
14 Mar, 2017
You can achieve this by adding a library that supports css minify to "webpack.config.js". In this snippet I use "optimize-css-assets-webpack-plugin" which uses cssnano for minimizing by default. The...
Delete object key and value in javascript
12 Oct, 2016
Deleting object value with key in javascript. For this you can use the delete operator. Permits you to remove a property from an object.
Minify JavaScript from command line
8 Mar, 2016
This snippet shows how to minify javascript files from command line. Minifying JavaScript is useful in many respects. Most important are security and performance. Security is increased due to the...
Get previous / next element using JavaScript
8 Mar, 2016
This snippet shows how to get element next to your element / selector. This a part of dom traversal. Using javascript for next element parsing can be used to create some powerful dynamic content. I...
AddThis: Popup instead of hover box
25 Nov, 2015
AddThis is an awesome social sharing tool. It is fully customizable. I suggest using addthis module for loading add this library, this has performance options for the javascript loading.
Get cursor position in CKEditor
12 Jun, 2015
Get cursor position in CKEditor is simple if you know some facts. You have to have the instance initiated, so simple jQuery ready would not work. You can get selection and use that functionality to...
Alter URL GET parameters using JavaScript
14 Aug, 2013
This function alters url get parameters using javascript. The function takes to consideration all aspects of url (parameter existis, hash, parameter doesn't exist). For an example if you need to be...
jQuery - Check if selector is disabled
7 Mar, 2013
You can use "is" to see if the form element is disabled.
Message before leaving the page - JavaScript / jQuery
8 Feb, 2013
How to display message before closing the page or moving to another page. Don't use this to annoy people. Sometimes this functionality is still useful, for an example if you have some sort of unsaved...
Get URL variables with JavaScript
21 Nov, 2012
This function gets URL variables in JavaScript. Current page url parameters will be parsed into array, that will be returned.
Monochrome Google Maps
19 Nov, 2012
This example shows how to create monocrome Google Maps. Where the map will be using only shades of grey (with or without black and/or white). It might also be called grayscale or black-and-white.
Round numbers in JavaScript
1 Oct, 2011
This snippet shows you how to round a number to a specified number of decimal places in JavaScript.
Switching Images With Arrows in JavaScript
7 Apr, 2011
This tutorial shows how to make image switcher with javascript. You can switch images by using arrows.
Loading AJAX Page / Dynamic Content
25 Aug, 2010
Tutorial about loading page with AJAX between any HTML tags. We are using jQuery JavaScript library to do this.