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 4 of 652
jQuery.click() vs onClick
In this article, we will learn the difference between jQuery.click() and onClick. The click() method is a jQuery event handler that attaches event listeners dynamically, while onClick is an HTML attribute that defines inline event handling directly in the markup. jQuery click() Method The click() method in jQuery is used to attach a click event handler to selected elements or trigger the click event programmatically. It follows the standard event registration model and allows multiple event handlers to be attached to the same element. Syntax Following is the syntax for the jQuery click() method − ...
Read MoreHow to prevent form from being submitted?
Preventing form submission is essential for client-side validation, custom handling, or multi-step forms. JavaScript provides several methods to prevent the default form submission behavior, allowing developers to validate data, show confirmation dialogs, or handle form data without page reloads. Syntax Following are the common syntaxes to prevent form submission − // Using event.preventDefault() event.preventDefault(); // Using return false return false; // Using addEventListener with preventDefault form.addEventListener('submit', function(e) { e.preventDefault(); }); Method 1 − Using event.preventDefault() The event.preventDefault() method cancels the default action that belongs to the event. When ...
Read MoreWhy doesn't height: 100% work to expand divs to the screen height?
The height: 100% property in CSS doesn't work as expected for expanding divs to screen height because percentage heights depend on the parent element's height. If the parent doesn't have an explicit height, the percentage calculation fails, and the element won't expand to full screen height. Why height: 100% Fails When you set height: 100% on a div, the browser looks for the parent element's height to calculate the percentage. If the parent element (like or ) doesn't have a defined height, the percentage has no reference point and defaults to the content height instead of the ...
Read MoreCreate A Form Using HTML Tables?
Creating forms using HTML tables was a common practice before CSS became widely adopted. While modern web development favors CSS-based layouts, understanding table-based forms is still valuable for maintaining legacy code and certain specific use cases. Syntax Following is the basic syntax for creating a form using HTML tables − Label: ...
Read MoreDoes ID have to be unique in the whole HTML page?
Yes, ID attributes must be unique throughout the entire HTML document. According to the official HTML specification, each ID value can appear only once per page. This uniqueness requirement ensures proper functionality for CSS styling, JavaScript manipulation, and anchor linking. Why ID Uniqueness Matters The uniqueness of IDs is critical for several reasons − CSS Targeting − The # selector in CSS expects to target exactly one element. Multiple elements with the same ID can cause styling conflicts. JavaScript Selection − Methods like getElementById() return only the first matching element, ignoring duplicates. Anchor Navigation − Browser ...
Read MoreWhy doesn't the height of a container element increase if it contains floated elements?
When a container element contains only floated elements, it doesn't automatically increase in height to contain them. This happens because floated elements are removed from the normal document flow, causing the parent container to "collapse" as if it contains no content. Why This Happens The CSS float property removes elements from the normal document flow, making them float to the left or right of their container. Since floated elements no longer occupy space in the normal flow, their parent container doesn't recognize their height, resulting in a collapsed container. Container Height Problem with Floated ...
Read MoreHTML table with 100% width, with vertical scroll inside tbody
Creating an HTML table with 100% width and vertical scroll inside the allows you to display large datasets while keeping the header fixed and maintaining the table's full width. This is particularly useful for displaying long lists of data in a constrained space. Syntax The key CSS properties for creating a scrollable tbody are − table thead, table tbody { display: block; } table tbody { height: [fixed-height]; overflow-y: auto; overflow-x: hidden; } The display: block property converts the table ...
Read MoreHow to add images in select list in HTML?
HTML does not natively support images in dropdown lists. However, we can create a custom dropdown using HTML, CSS, and JavaScript that mimics the behavior of a select list while displaying images alongside text options. Why Custom Dropdowns? The standard HTML element only accepts text content in its tags. To include images, we must build a custom solution using divs, buttons, and CSS styling that provides the same user experience as a native select dropdown. Basic Structure A custom image dropdown consists of three main components − Dropdown Button − The ...
Read MoreHow to append to innerHTML without destroying descendants' event listeners with JavaScript?
The innerHTML property in JavaScript allows you to modify the HTML content of an element. However, a common problem occurs when appending content using innerHTML += − it destroys existing event listeners attached to descendant elements. This happens because the entire content is re-parsed and recreated. The Problem with innerHTML += When you use innerHTML += "new content", JavaScript actually performs these steps − Reads the current HTML content Concatenates the new content Replaces the entire innerHTML with the new string Destroys existing DOM elements and their event listeners ...
Read MoreHow to add HTML and CSS to PDF?
In this tutorial, we will learn how to convert HTML and CSS content to PDF using JavaScript libraries. Creating PDFs from web content allows users to save styled webpages, forms, reports, or any HTML content as downloadable documents. Converting HTML and CSS to PDF from scratch using vanilla JavaScript is complex and requires extensive coding. Fortunately, several JavaScript libraries simplify this process by providing easy-to-use methods for generating PDFs from web content. We will explore two popular libraries − html2pdf.js and jsPDF − both of which can convert styled HTML content into PDF documents directly in the browser. ...
Read More