Found 8895 Articles for Front End Technology

How to remove “disabled” attribute from HTML input element using JavaScript?

Shubham Vora
Updated on 17-May-2023 12:07:38

3K+ Views

In HTML, we can use input elements to take input from the users by creating a form or in any other way. There are different types of input elements, such as checkboxes, radio buttons, text, numbers, etc. We can use the ‘disabled’ property with every element to disable the input field and stop users from interacting with the input element. In some cases, we require to add and remove the disabled attribute using JavaScript. For example, we want to take the pan card numbers of the users whose age is greater than 18. So, we require to enable the ... Read More

How to read all spans of a div dynamically?

Shubham Vora
Updated on 17-May-2023 12:02:03

745 Views

One HTML element can contain multiple nested HTML elements while creating web pages. In some cases, developers may require to read the particular HTML elements of one HTML element. In our case, we require to read all span elements of the div element and extract the content of them. In this tutorial, we will learn to read the content of all spans of a div element using JavaScript and again append it to the web page in the formatted way. Syntax Users can follow the syntax below to read all spans of a div element dynamically using JavaScript. var spans ... Read More

How to prevent Body from scrolling when a modal is opened using jQuery?

Shubham Vora
Updated on 17-May-2023 11:52:43

23K+ Views

A modal is a special user interface that we show on top of all the content of the web page. It is used to show some special information on the web page or move users out from the regular flow of the web page. For example, you may have seen on many websites that subscribe popup box appears on the web page saying to enter your email address to subscribe to the newsletter. Also, the alert box is modal, which doesn’t allow you to interact with the web page content until you close the modal. So, when we show users ... Read More

How to play a notification sound on websites?

Shubham Vora
Updated on 17-May-2023 11:31:23

5K+ Views

Nowadays, web development continues to evolve and find new ways to improve the user experience. One way to improve the user's experience is by adding notifications to the website to notify users of any event. Before we start with the tutorial, let’s understand why we need notifications with sounds on the website. Why Add Notification Sounds? As we said above, notification is used to enhance the user experience. We can use it to notify users for a task, such as when users completes the form submission, get a message in the chat app, for reminders, etc. If users are away ... Read More

How to place cursor position at end of text in text input field using JavaScript?

Shubham Vora
Updated on 17-May-2023 11:23:40

8K+ Views

In HTML, the input field is used to take input from the users. Sometimes, we require to take string or long text messages in the input. In these scenarios, users may need to go to the end of the input field to add more content or message. So, we should set up something such that users can click the button, can go to the end of the input field. In this tutorial, we will learn to use JavaScript to place the cursor position at the end of the text in the input field. Using the setSelectionRange() method The setSelectionRange() method ... Read More

How to remove indentation from an unordered list item using CSS?

Tarun Singh
Updated on 14-Jul-2023 16:03:04

4K+ Views

When it comes to style unordered lists using CSS, indentation is a common feature used to give a visual hierarchy to the list items. However, in some cases, you may want to remove the indentation from a specific list item or from the entire list altogether. An unordered list, also known as a bulleted list, is a type of HTML list that presents information as a list of items, with each item preceded by a bullet or a symbol. The items in the list are not numbered or ordered in any particular sequence, and the purpose of an unordered ... Read More

How to display HTML tags as plain text in HTML?

Tapas Kumar Ghosh
Updated on 12-Nov-2023 11:49:29

2K+ Views

HTML tags are used for defining the structure of the webpage. Various types of tags can use used for dealing with text in HTML. In this article, we will use the plaintext tag to display the HTML tag in the output. The examples used in this article will help you understand how to use this plaintext tag in various ways to display HTML tags as plain text. Following are the HTML entities that displays the HTML text as plain text − Syntax ...write the HTML tags Plaintext is such type of tag that allows printing the HTML tags ... Read More

How to display paragraph elements as inline using CSS?

Tapas Kumar Ghosh
Updated on 16-May-2023 09:25:49

2K+ Views

CSS has internal and inline styles that can be used to display the paragraph element in an inline manner. CSS is a language used for styling the HTML and XML texts. Changing the display property of an HTML element is a typical CSS job. The display attribute of an element indicates how it should be presented, such as block, inline, or inline-block. When displaying a paragraph element inline, the display property must be modified from its default block value to inline. Here we are going to learn how to develop a css code that will display the paragraph elements as ... Read More

How to Design Wave Images in HTML?

Tapas Kumar Ghosh
Updated on 16-May-2023 09:28:42

518 Views

HTML has an SVG element that can be used for designing wave images. The wave image shows the unique style of the webpage and it becomes more user interactive while adding the property of animation and transitions to it. The wave design is generally used in the landing page, button, and webpage image. To create the wave image, the SVG element is the best way to design the wave formation. Syntax The SVG element is used to draw the graphics. The viewbox attribute defines the position and dimension of the graphics. The ... Read More

How to Draw Graphics using Canvas in HTML5?

Tapas Kumar Ghosh
Updated on 16-May-2023 09:30:57

477 Views

In HTML5 We can use the canvas element to Draw 2D Graphics on the webpage. To draw the canvas graphics, we use tag that creates the interactive graphics, and animation to render it to the web browser. This Canvas element is only available in HTML 5 and not in the previous version. It can generate complex visualization in the field of games and data that helps developers to give visual demonstration of the work. In this article, we will learn how to use canvas element to Draw basic graphic design in 2D using various examples. Syntax ……write some ... Read More

Advertisements