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 Mohit Panchasara
67 articles
HTMLCollection for Loop
The HTMLCollection is an array-like object containing HTML elements. We can access every element in the collection using its index and iterate through the collection to process all elements one by one using various loop methods. HTMLCollection iteration is commonly used when you need to perform operations on multiple elements. For example, clearing all checkboxes when a user clicks a "Clear All" button, or styling all elements with the same class name. The collection updates automatically when elements are added or removed from the DOM. In this tutorial, we will learn different loop methods to iterate through HTMLCollections ...
Read MoreWhat are the Materialize Classes of Dropdowns?
Materialize is a front-end development framework based on Google's Material Design guidelines. It provides pre-designed HTML components with CSS styling and JavaScript functionality, including dropdown menus that allow users to select from multiple options in a clean, organized interface. Dropdowns are essential UI components when you need users to select single or multiple options from a list. Materialize provides basic pre-styled dropdown menus that can be easily customized using various classes and JavaScript properties like isOpen (returns boolean for dropdown state) and focusIndex (returns the focused item index). Syntax Following is the basic syntax for creating a ...
Read MoreHow to perform a real time search and filter on a HTML table?
When dealing with large datasets in web applications, implementing search functionality in HTML tables significantly improves user experience. Instead of manually scanning through hundreds or thousands of rows, users can quickly filter table data by typing search terms. This article demonstrates how to implement real-time search and filter functionality using both vanilla JavaScript and jQuery. Syntax Following is the basic syntax for implementing table search using JavaScript − if (td) { if (txtValue.toLowerCase().indexOf(search_value) > -1) { tr[i].style.display = ""; } else { ...
Read MoreHow to place Font Awesome icon to input field?
In many cases, developers require to place an icon inside the text input or particular HTML element. For example, when creating a form containing multiple inputs, placing icons related to each form field inside the input can create a better UI and more attractive design for the application. In this tutorial, we will use the Font Awesome library to add icons to web pages and manipulate CSS code to place these icons inside input fields. Font Awesome provides scalable vector icons that can be customized with CSS properties like size, color, and positioning. Syntax Following is the ...
Read MoreHow to prevent browser to remember password in HTML?
Browser password storage is a common feature that saves login credentials for user convenience. However, this automatic behavior can pose security risks and privacy concerns, especially on shared computers or when handling sensitive applications. The browser stores form data and passwords in local storage, cookies, or browser-specific password managers. While password suggestions are helpful for regular websites, they should be disabled for sensitive applications like banking, admin panels, or any system where unauthorized access could cause harm. This tutorial demonstrates how to prevent browsers from remembering passwords using HTML attributes and JavaScript techniques. Using the Autocomplete Attribute ...
Read MoreHow to prevent dragging of ghost image?
By default, HTML elements including images display a ghost image when dragged by users. This ghost image is a semi-transparent copy that follows the cursor during the drag operation. However, for certain images like logos, icons, or decorative elements, this dragging behavior may be undesirable as it can confuse users or interfere with the intended user experience. In this tutorial, we will learn various methods to prevent the dragging of ghost images using the draggable attribute, JavaScript, and jQuery. What is a Ghost Image? When you drag an image element, the browser creates a semi-transparent copy called ...
Read MoreHTML width/height Attribute vs CSS width/height Property
While developing web pages, many times, developers require to manage the size of different HTML elements such as image, div element, span element, etc. Developers can use the width and height CSS properties or HTML attributes to manipulate the dimensions of a particular element. In this tutorial, we will see the difference between the width/height HTML attribute and CSS properties. Width and Height HTML Attributes The width/height attributes in HTML are used for the presentation. It takes the width and height values in the 'px', '%', etc. units but not in 'rem' units. Also, if we don't ...
Read MoreHow to toggle between one checkbox and a whole group of checkboxes in HTML?
The toggling between a single checkbox and a group of checkboxes means that when a user checks one checkbox from a group, all other checkboxes in the group become unchecked, and when the user checks a special "clear" checkbox, all checkboxes in the group get unchecked. This functionality is useful for creating mutually exclusive selections or providing a convenient way to clear multiple checkboxes at once. Syntax Following is the syntax to uncheck all checkboxes in a group using JavaScript − checkboxes.forEach((checkbox) => { checkbox.checked = false; }); Here, checkboxes refers ...
Read MoreHow to switch between multiple CSS stylesheets using JavaScript?
In this tutorial, we will learn to switch between multiple CSS stylesheets using JavaScript. Have you ever thought that when you toggle the theme of TutorialsPoint's website, how it changes the CSS of the whole website? Here is a simple answer. When the user presses the button, it switches the CSS stylesheets for the website like it removes the stylesheet for the white theme and adds the stylesheet for the dark theme. Here, we will see examples of switching between multiple CSS files using JavaScript. Syntax Users can follow the syntax below to switch between multiple ...
Read MoreHow to prevent overriding using Immediately Invoked Function Expression in JavaScript?
JavaScript allows developers to add functionality and behaviors to the web page. Developers require to create multiple functions and variables to add functionality to different parts of the web page. While developing real-time applications, multiple developers work on the same project. So, avoiding the unintentional overriding of functions and variables while collaborating with multiple developers is necessary. In this tutorial, we will learn to prevent overriding using immediately invoked function expressions. Problem of Overriding For example, two colleagues are working on the same project, and both have defined the printAge() function inside the code and merged the ...
Read More