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
Articles by Dishebh Bhayana
Page 3 of 4
How to disable button element dynamically using JavaScript?
In this article, we will learn how to disable button HTML elements dynamically using javascript, with the help of the “disabled” attribute. The “disabled” attribute in HTML button elements accepts a boolean value (true or false), and depending on the value, it disables the button and makes it non-functional, i.e., not clickable. We can use this attribute to disable any button in HTML by setting the “disabled” attribute to “true”. Syntax Disabled Button Let’s understand this with the help of some examples − Example 1 In this example, we will disable a button element by passing the “disabled” attribute ...
Read MoreHow to disable arrows from Number input?
In this article, we will learn how to disable and hide arrows from number-type input with the help of 2 different approaches, one using CSS, and the other using an “inputmode” attribute. Number-type inputs are useful when we only want inputs in terms of numbers from users, like input for age, height, weight, etc. By default, the browsers show arrows in the number-type inputs that help us change (increase or decrease) the values in the input. Let’s understand how to implement above with the help of some examples. Example 1 In this example, we will use HTML readonly attribute ...
Read MoreHow to disable the ALT key using jQuery?
In this article, we will learn how to disable the ALT key using jQuery with the help of “keydown” and “keyup” event listeners, and the bind method. In web development, there might be scenarios where you want to disable certain keys on your web page. One such key is the ALT key, which is often used in combination with other keys to trigger specific actions or shortcuts. However, in certain cases, disabling the ALT key may be necessary to ensure the proper functioning of the application. Let’s understand this with the help of some examples − Example 1 In ...
Read MoreHow to disable a jQuery-ui draggable of widget?
We can disable a jQuery UI draggable widget with the help of its draggable disabled option. jQuery is a javascript library that helps us manipulate the DOM easily and efficiently using its various helper methods and properties. It allows us to add interactivity to the DOM as well as add and change the CSS styles of the DOM elements. Syntax $(element).draggable({ disabled: true }) We will be using the following jQuery link in our application − The above-provided code snippet is a link tag that imports the CSS file from the jQuery UI library. Example ...
Read MoreHow to author fast-loading HTML pages?
We can optimize our web application in various ways, and cause our web page to load faster, and in a more efficient way, which not only will reduce the load on the web servers, but also increase the SEO rankings of the website. Let’s discuss the different ways through which we can optimize the web page, and understand them with the help of examples. Approach 1: Minimize the File Size as Much as Possible File size should be minimized as much as possible. This can be achieved by trimming unnecessary whitespaces from within the file, removing unnecessary comments, and/or replacing ...
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 just with the help of CSS, and even achieve the desired layout and orientation of the paged media. We will be using @page directive to achieve our results. While previewing a print page in the browser, we see some extra page information, like page title, page preview date and time, and the page number in the preview, all present in the page’s header and footer. We also see some extra margin applied to the page preview media. Syntax @media print { @page { ...
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 of a page using the CSS media query print property, @media print. @media print is a CSS media query that allows us to add page styling to the print preview page of any webpage. Using this, we can create a printable webpage by specifying the “visibility” of an HTML element to “visible” or “hidden” under the given media query, We can also add any other styling we want to have in the print preview screen to the @media print query. Syntax @media print { ...
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 would be non-working (or disabled) at their end positions by using vanilla javascript. Javascript is a powerful browser-level language with which we can control and manipulate the DOM elements easily. Here, we will create 2 buttons, and change an HTML element’s content depending on which button is clicked. Example 1 In this example, we will create an “increment” and a “decrement” button which, when clicked, will increment and decrement the HTML element’s content value by 1, respectively. We will also disable the buttons when they reach their extreme positions, which will be ...
Read MoreHow to create numbering using counter-increment property in CSS?
The “counter-increment” property given in CSS 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 − css-counter increment-value; Here, the css-counter refers to the counter variable declared in CSS, and the increment-value refers to the value by which you want to increment or ...
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 that ...
Read More