Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Abhishek
68 articles
How to sort HTML elements by data-attribute?
In HTML, you can sort elements by their data attributes using JavaScript. Data attributes allow you to store custom information directly in HTML elements, which can then be used for sorting, filtering, or other dynamic operations. This technique is particularly useful when you need to reorder elements based on custom criteria without modifying the original HTML structure. Common use cases include sorting product lists by price, organizing content by date, or arranging elements by priority levels stored in data attributes. Syntax Following is the basic syntax for adding data attributes to HTML elements − Content ...
Read MoreHow to use font awesome icon as a cursor?
Web browsers display an arrow cursor by default, but CSS allows us to customize cursor appearance using the cursor property with values like pointer, grab, or zoom-in. However, we can go beyond these predefined options by using Font Awesome icons as custom cursors through HTML5 Canvas and data URLs. How It Works To use a Font Awesome icon as a cursor, we need to − Include the Font Awesome CDN in our HTML document Create an HTML5 element dynamically using JavaScript Draw the Font Awesome icon onto the canvas using its Unicode character Convert the ...
Read MoreHow to use SVG with :before or :after pseudo element?
The :before and :after pseudo-elements in CSS allow you to insert content before or after an element without adding extra HTML markup. These pseudo-elements are particularly useful for decorative content and can be used to display SVG images alongside your existing content. There are two primary methods to use SVG with :before and :after pseudo-elements − Using the content property − Directly embed SVG URLs or inline SVG code in the content property. Using the background-image property − Set SVG as a background image for the pseudo-element. Syntax Following is the basic syntax for ...
Read MoreHow to use text-overflow in a table cell?
The text-overflow property in CSS controls how overflowing text is displayed when it exceeds its container's boundaries. This property is particularly useful in table cells where space is limited and you need to present text in a clean, organized manner. The text-overflow property must be used alongside two essential properties: white-space: nowrap and overflow: hidden. Without these companion properties, text-overflow has no effect. Syntax Following is the syntax for using the text-overflow property in table cells − td { max-width: value; white-space: nowrap; overflow: hidden; ...
Read MoreHow to use media queries in a mobile-first approach in HTML?
The mobile-first approach is a responsive web design strategy where you start by designing and coding for mobile devices first, then progressively enhance the layout for larger screens using CSS media queries. This approach ensures better performance on mobile devices and creates a solid foundation for scalability across all screen sizes. In mobile-first design, you write base CSS styles for small screens (mobile devices) and then use media queries with min-width breakpoints to add or override styles for tablets, desktops, and larger displays. This approach is opposite to the desktop-first method, where you start with desktop styles and use ...
Read MoreHow to set the maximum value of progress bar using HTML?
The progress bar on websites represents the completion percentage of tasks like file downloads, form submissions, or data processing. In HTML, the element creates a visual progress indicator that shows how much work is completed versus the total amount. The element uses two key attributes to control its behavior. The max attribute sets the maximum value representing 100% completion, while the value attribute indicates the current progress level. Syntax Following is the syntax for the HTML progress element − The progress bar calculates the completion percentage as: (value / max) ...
Read MoreHow to sort a set in JavaScript?
A Set is a JavaScript data structure that stores unique values in insertion order. Unlike arrays, Sets cannot be sorted directly because they don't have a sort() method. To sort a Set, we must convert it to an array, sort the array, and create a new Set from the sorted results. In this article, we'll learn different approaches to sort Sets in JavaScript using array conversion and the sort() method. Why Sets Cannot Be Sorted Directly Sets maintain insertion order and focus on uniqueness rather than sorting. They lack array methods like sort(), so we need an ...
Read MoreHow to sort an array of object by two fields in JavaScript?
An array of objects is an array that contains all the elements in the form of JavaScript objects. Here, we are said to use an array of objects with two fields that means, have to use objects with two elements as elements of the array. In this article, we are going to learn about the method of sorting the array of objects by two fields in JavaScript. We can simply use the sort() method of JavaScript to sort the elements of an array and give it a cmp or the comparator function to define the order in which we ...
Read MoreHow to sort an array on multiple columns using JavaScript?
An array with multiple columns is an array that contains multiple elements at each index position. In other words, it's an array of arrays where each sub-array represents a row with multiple column values that need to be sorted based on specific criteria. In this article, we'll learn how to sort arrays with multiple columns using JavaScript's sort() method combined with custom comparator functions. We'll explore different sorting strategies for various data types. Basic Syntax The fundamental approach uses a custom comparator function with the sort() method: array.sort((a, b) => { ...
Read MoreHow to sort element by numerical value of data attribute using JavaScript?
In JavaScript, you can sort DOM elements by their data attributes using different approaches. This is useful when you need to reorder elements based on numerical values stored in data attributes. This article demonstrates two methods to sort elements by numerical data attribute values: Using the getAttribute() method to access data attributes Using the dataset property for cleaner syntax Using the getAttribute() Method The getAttribute() method retrieves the value of any HTML attribute, including data attributes. This method works across all browsers and provides explicit attribute access. ...
Read More