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 Scripts Articles
Page 10 of 47
An empty box is displayed instead of the rupee symbol in HTML
When displaying the Indian rupee symbol (₹) in HTML, you might encounter an empty box instead of the symbol due to browser compatibility or font issues. Here are reliable solutions to ensure proper rupee symbol display. The Problem The rupee symbol using HTML entity ₹ may not display correctly in all browsers or devices: ₹ This can appear as an empty box □ if the browser or font doesn't support the Unicode character. Using Font Awesome Icons (Recommended) Font Awesome provides cross-browser compatible rupee icons: ...
Read MoreHow to set the position of the list-item marker with JavaScript?
To set the position of the marker of the list-item, use the listStylePosition property in JavaScript. This property determines whether the list marker appears inside or outside the list item's content flow. Syntax element.style.listStylePosition = "inside" | "outside" | "inherit"; Parameters Value Description inside Marker is positioned inside the list item's content box outside Marker is positioned outside the list item's content box (default) inherit Inherits the value from parent element Example: Interactive List Position ...
Read MoreDoes HTML5 only replace the video aspects of Flash/Silverlight?
HTML5 doesn't only replace video aspects of Flash/Silverlight—it provides comprehensive alternatives for graphics, animations, multimedia, and interactive content through several powerful technologies. What HTML5 Offers Beyond Video While HTML5's and elements replace Flash's multimedia capabilities, the element provides a complete drawing and animation platform using JavaScript. HTML5 Canvas Element The element creates a drawable region where you can render graphics, animations, and interactive content dynamically: Canvas Animation Example Here's a simple animation that demonstrates Canvas capabilities: const canvas = document.getElementById('animCanvas'); const ...
Read MoreHow to set the maximum height of an element with JavaScript?
Use the maxHeight property in JavaScript to set the maximum height of an element. This property controls how tall an element can grow, with content overflowing when the limit is reached. Syntax element.style.maxHeight = "value"; Parameters The maxHeight property accepts various values: Pixels: "200px" Percentage: "50%" (relative to parent) Keywords: "none" (no limit), "initial", "inherit" Example: Setting Maximum Height #box { width: 300px; background-color: gray; ...
Read MoreinnerHTML adds text but not HTML tags
When using innerHTML in JavaScript, you need to ensure proper HTML string formatting and correct assignment. The innerHTML property parses and renders HTML tags when set correctly. Common Issue: Building HTML Strings When concatenating HTML strings with +=, make sure to build the complete HTML structure before assigning it to innerHTML. var myNum = [1, 2, 3]; var myStr; myStr = ""; for(var a in myNum) { myStr += "" + myNum[a] + ""; } myStr += ""; document.getElementById("numberList").innerHTML = myStr; • 1 ...
Read MoreHow to set the margins of an element with JavaScript?
Use the margin property in JavaScript to set the margins of an element. You can access this through the element's style object to modify margins dynamically. Syntax element.style.margin = "value"; element.style.marginTop = "value"; element.style.marginRight = "value"; element.style.marginBottom = "value"; element.style.marginLeft = "value"; Setting All Four Margins You can set all margins at once using the shorthand margin property with space-separated values: Set All Margins This text will have its margins changed. ...
Read MoreDrop target listens to which events in HTML5?
To accept a drop in HTML5, a drop target must listen to at least three essential events that handle the drag-and-drop sequence. Required Events for Drop Targets The dragenter event, which is used to determine whether the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled. The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value. Finally, the drop ...
Read MoreHow to set the list-item marker type with JavaScript?
To set the type of the list-item marker, use the listStyleType property in JavaScript. This property allows you to change bullet styles for unordered lists and numbering styles for ordered lists. Syntax element.style.listStyleType = "value"; Common List Style Types Here are the most commonly used marker types: Value Description Best for disc Filled circle (default) Unordered lists circle Empty circle Unordered lists square Filled square Unordered lists decimal Numbers (1, 2, 3...) Ordered lists upper-roman Uppercase Roman (I, II, III...) Ordered ...
Read MorePositioning HTML5 SVG in the center of screen
To center an SVG element horizontally on the screen, you can use CSS properties like margin and display. This technique works by making the SVG a block-level element and setting automatic left and right margins. CSS for Centering SVG Apply the following CSS to center your SVG element: #svgelem { margin-left: auto; margin-right: auto; display: block; } HTML SVG Element Here's the SVG element that we'll center using the above CSS: ...
Read MoreHow to set the bottom margin of an element with JavaScript?
The marginBottom property in JavaScript allows you to dynamically set the bottom margin of an element. This property is part of the element's style object and accepts values in pixels, percentages, or other CSS units. Syntax element.style.marginBottom = "value"; Where value can be in pixels (px), percentages (%), em units, or other valid CSS margin values. Example: Setting Bottom Margin Here's how to set the bottom margin of an element when a button is clicked: ...
Read More