Found 2202 Articles for HTML

How to Only Allow Numbers in a Text Box using jQuery?

AmitDiwan
Updated on 22-Nov-2022 05:45:15

14K+ Views

We can easily allow only numbers in a textbox using jQuery. Under the keyup() set the code for allowing only number values so that the textbox never accept strings. We will see two examples − Allow Only Numbers in a TextBox using jQuery replace() Allow Only Numbers in a TextBox using jQuery fromCharCode() Allow Only Numbers in a TextBox using jQuery replace() In this example, we will see how to allow only numbers in a TextBox using jQuery replace(). We must set the code under the keyup to allow only numbers while typing, else the textbox will not ... Read More

How to embed base64 images in HTML?

AmitDiwan
Updated on 01-Nov-2022 13:11:58

7K+ Views

To embed images encoded with Base64, use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests. Set the base64 image in the src attribute of the . Let’s say we have the following image − Note − The bigger the image, the more will its bease64 code For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts − The 1st part is the Base64 encoded image. The 2nd part is the Base64 encoded ... Read More

Can different HTML elements have the same ID?

AmitDiwan
Updated on 01-Nov-2022 13:01:36

491 Views

No, we cannot have the same ID for different elements in HTML. IDs have to be unique in the entire HTML page. Even the official HTML standards suggest the same − Using the unique id attribute Example Let us see an example. Here, we have used the id attribute − DOCTYPE html> #myHeader { border: 3px solid violet; background-color: blue; ... Read More

How do I make a placeholder for a 'select' box?

AmitDiwan
Updated on 01-Nov-2022 12:54:41

4K+ Views

In HTML, placeholder attribute is present for creating a placeholder, but unfortunately it isn’t available for the select box. Create Placeholder for select We can use the option tag to define an option in a select list. The value attribute of the option tag is used for this. Here we have set List of Technologies as the placeholder text − List of Technologies Example Let us now see the complete example − DOCTYPE html> select { appearance: ... Read More

How to change the href attribute for a hyperlink using jQuery?

AmitDiwan
Updated on 01-Nov-2022 12:48:59

3K+ Views

The jQuery attr() method is used to change the href attribute for a hyperlink. Query attr() method is used to fetch the value of any standard attribute from the matched HTML element(s). Let us see an example. First, get the current URL − var httpUrl = $(this).attr("href"); Create a new URL by replacing the above using the replace() − var httpsUrl = httpUrl.replace("http://", "https://"); We will convert the https links to link using what we saw above − Tutorialspoint Tutorialspoint Courses Tutorialspoint EBooks Tutorialspoint QA Example Let us see the complete example to change the ... Read More

Unescape HTML entities in JavaScript?

AmitDiwan
Updated on 12-Nov-2023 10:48:58

1K+ Views

To unescape HTML entities in JavaScript, use the unescape() function. Let’s say you want to encode special character with the unescape() function − document.write(unescape("Demo%20Text%20")); In this article, we will see two examples − Unescape Entities Decode the Encoded String Unescape Entities Example Lo unescape, we will use the unescape() method in JavaScript. Let us see an example − DOCTYPE html> Demo Heading document.write(unescape("Demo%20Text%20")); Output Decode the Encoded String Use escape() for encoding ... Read More

How to make an element width: 100% minus padding?

AmitDiwan
Updated on 01-Nov-2022 12:38:47

2K+ Views

Let’s say we have padding: 50px 10px; for the input and want it to be 100% of the parent div's width. Using width: 100%; is not working. To fix it, we can place the input in a div with position: relative and a fixed height. This will form the element width to be 100% minus padding. We have set the position to be relative with fixed height − .container { position: relative; height: 30px; } The position of the input is set absolute − content { position: absolute; ... Read More

How to display Base64 images in HTML?

AmitDiwan
Updated on 14-Sep-2023 21:56:10

26K+ Views

To display images encoded with Base64, you need to get the base64 encoded string and use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests. Set the base64 image in the src attribute of the . Let’s say we have the following image − For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts − The 1st part is the Base64 encoded image. The 2nd part is the Base64 encoded string of the image. ... Read More

Retrieve the position (X,Y) of an HTML element

AmitDiwan
Updated on 01-Nov-2022 11:57:44

5K+ Views

The X, Y position of an HTML document represents X as horizontal whereas Y vertical position. Here, we will see two examples to get the position i.e. Get the position of a specific text on a web page. Get the position of buttons on a web page. Get the position of a specific text on a web page To get the position of a specific text on a web page, we will use the getBoundingClientRect() method. It provides information about the size of an element and its position relative to the viewport. This will give us the ... Read More

How can I make a div not larger than its contents?

AmitDiwan
Updated on 01-Nov-2022 11:51:18

138 Views

To make a div not larger than its contents, use the display property with the value inline-block. We have a div here with an image − The div is styled with inline-block. This inline-block would form a div not larger than its contents − .wrapper{ display: inline-block; border: 10px solid orange; } The image is given a border − img{ border: 20px solid white; } Example Let us now see the complete example − DOCTYPE html> ... Read More

Advertisements