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 Dishebh Bhayana
Page 2 of 4
How to dynamically insert id into a table element using JavaScript?
In this article, we will learn how to dynamically insert IDs into table elements using JavaScript with the help of various DOM manipulation techniques. In web development, dynamically inserting an ID into an HTML table element can be a useful technique when we need to uniquely identify and manipulate specific rows or cells. By assigning IDs to table elements programmatically, we gain more control and flexibility in accessing and modifying the table's content. Let's understand how to implement this with the help of some examples. Method 1: Using the id Property In this example, we generate ...
Read MoreHow to create the previous and next buttons and non-working on the end positions using JavaScript?
We can create previous and next buttons that are disabled at their end positions using vanilla JavaScript. JavaScript allows us to control and manipulate DOM elements easily. Here, we will create navigation buttons and change an HTML element's content depending on which button is clicked. Example 1: Counter with Disabled States In this example, we will create "Next" and "Previous" buttons that increment and decrement a counter. The buttons will be disabled when they reach their extreme positions (0 for Previous and 5 for Next). Previous and Next Buttons with ...
Read MoreHow to display a list in n columns format?
In this article, we will learn how to display a list in "n" column format in HTML and CSS with the help of CSS Multi-Column Layout, Flexbox, and CSS Grid properties. Displaying a list in columns can be a useful way to save space and make the information more visually appealing. We can achieve this by using different approaches that rely on column-count, flexbox, and grid properties respectively. Syntax /* Multi-Column Layout */ selector { column-count: number; } /* Flexbox Approach */ selector { display: flex; ...
Read MoreHow to disable arrows from Number input?
In this article, we will learn how to disable and hide arrows from number-type input fields using CSS. Number-type inputs display spinner arrows by default that allow users to increment or decrement values, but sometimes you may want to remove these for a cleaner interface. Number-type inputs are useful when we only want numeric input from users, like input for age, height, weight, etc. By default, browsers show spinner arrows in number inputs that help change the values. Syntax /* WebKit browsers (Chrome, Safari) */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; ...
Read MoreHow to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page's header, footer, and margin with CSS using the @page directive. This allows us to customize the layout and remove browser-generated print options like headers, footers, and default margins. When previewing a print page in the browser, you typically see extra information like the page title, date and time, and page numbers in the header and footer. There are also default margins applied to the page. We can disable these using CSS print styles. Syntax @media print { @page { margin: ...
Read MoreHow to create a printable webpage using CSS media queries?
We can create a printable webpage and control the styling in the print preview using the CSS @media print media query. This powerful CSS feature allows us to define specific styles that only apply when a user prints the webpage or views the print preview. We can control element visibility, adjust layouts, modify colors, and optimize content specifically for print format. Syntax @media print { /* CSS styles for print version */ selector { property: value; } ...
Read MoreHow to create numbering using counter-increment property in CSS?
The CSS counter-increment property is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage. We will also use the counter-reset CSS property here, which helps us to reset or initialize the CSS counter value to a desired number. Syntax /* counter-increment */ selector { counter-increment: counter-name increment-value; } /* counter-reset */ selector { counter-reset: counter-name reset-value; } Here, the ...
Read MoreHow to automatically close all collapsible elements inside of the accordion when closing the accordion?
We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the "hide" collapse event by attaching an event listener to the parent accordion. After that, when the "hide" collapse event gets fired, we will find all the collapsible elements inside ...
Read MoreHow to Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a "meta" tag with the "http-equiv" property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases − for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let's look at the 2 approaches below to understand how to set up an auto-refreshing website. Method 1: Using Meta Tag In this approach, we will use the "http-equiv" property of a "meta" tag ...
Read MoreHow to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content while typing in an input field, we use the amp-autocomplete component from Google AMP. This component provides dynamic suggestions as users type, enhancing the search experience. Required Scripts To create auto-suggest functionality in Google AMP, you need to include these scripts − Installation: Add these script tags to your HTML section to enable AMP autocomplete functionality. Basic Syntax {"items": ...
Read More