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
Front End Technology Articles
Page 34 of 652
How 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 disable the input type text area?
In this article, we will learn how to disable the textarea element using different methods in HTML. The element is used to create multi-line text input fields in forms. Disabling a textarea can be useful in situations where you want to display information to the user but prevent them from editing or modifying that information. For example, displaying a message or instructions in a textarea, or preventing user input during form submission to maintain data consistency. Syntax The disabled attribute is used to disable form elements including textarea − Content Or with ...
Read MoreHow to disable mouseout events triggered by child elements?
When working with mouse events in JavaScript, the mouseout event can trigger unwanted behavior due to event bubbling. When a mouseout event occurs on a child element, it bubbles up through the DOM hierarchy and also triggers the same event on all parent elements. This creates issues when you only want to listen for mouseout events on the parent element itself, not the bubbled events from child elements. There are several effective approaches to prevent this unwanted behavior and disable mouseout events triggered by child elements. Understanding Event Bubbling Event bubbling means that when an event occurs ...
Read MoreHow to display a dialog box on the page?
The dialog box is an essential UI component that provides feedback to users, collects input, or displays important information. HTML offers multiple ways to implement dialog boxes, from the native element to traditional JavaScript methods like prompt() and confirm(). Dialog boxes serve various purposes including user confirmations, data input forms, notifications, and authentication prompts. They help create focused user interactions by overlaying content above the main page. Syntax Following is the syntax for the HTML element − Dialog content here To control the dialog programmatically − ...
Read MoreHow to display a popup message when a logged-out user tries to vote?
In this article, we will learn how to display a popup message when a logged-out user tries to vote using jQuery and various JavaScript methods. This is a common requirement in web applications where certain actions like voting, commenting, or rating should be restricted to authenticated users only. To implement this functionality, we will use the jQuery library along with HTML and CSS to create interactive popup messages. When an unauthenticated user attempts to vote, we will show an informative popup that prompts them to log in first. Syntax Following is the basic syntax for checking user ...
Read MoreHow to eliminate extra space before and after a form tag?
When designing web forms, the form element can introduce unwanted spacing that disrupts your layout. The tag, like other block-level elements, has default browser margins and padding that create extra space above and below the form content. This extra spacing can affect the overall design and alignment of your form elements, especially when forms are placed within containers or alongside other elements. Understanding how to eliminate this space ensures a clean and compact form layout. Understanding Default Form Spacing By default, most browsers apply margins to form elements. The element typically receives a top and ...
Read More