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
HTML Articles
Page 85 of 151
Execute a script each time the playback rate changes in HTML?
The onratechange event attribute in HTML executes a JavaScript function whenever the playback rate of an audio or video element changes. This event is particularly useful for creating custom media controls or displaying the current playback speed to users. Syntax Following is the syntax for the onratechange attribute − ... ... The onratechange attribute can be used with both and elements. The function specified will execute each time the playbackRate property changes. Playback Rate Property The playbackRate property controls the speed at which media content plays − 1.0 ...
Read MoreSet the language of the linked document in HTML
The hreflang attribute in HTML specifies the language of the linked document. This attribute helps search engines understand the language of the target page and assists browsers in providing appropriate language-based features to users. Syntax Following is the syntax for the hreflang attribute − Link Text The language-code follows the ISO 639-1 standard (two-letter language codes) and can optionally include a country code using ISO 3166-1 alpha-2 format. Common Language Codes Here are some commonly used language codes with the hreflang attribute − Language Code Language Example Usage ...
Read MoreGet the HTTP header for the information of the content attribute in HTML
The http-equiv attribute in HTML is used within tags to simulate HTTP response headers. It provides metadata that would normally be sent by a web server, allowing you to control browser behavior and document properties directly from the HTML. The http-equiv attribute works in conjunction with the content attribute to specify both the header name and its value. This is particularly useful for setting refresh intervals, character encoding, cache control, and other HTTP-like directives. Syntax Following is the syntax for the http-equiv attribute − Where header-name is the HTTP header to ...
Read MoreExecute a script when the element gets focus in HTML?
The onfocus attribute in HTML executes a JavaScript function when an element receives focus. Focus occurs when a user clicks on an input field, tabs to it using the keyboard, or programmatically selects it. This attribute is commonly used with form elements like input fields, text areas, and select dropdowns. Syntax Following is the syntax for the onfocus attribute − The onfocus attribute accepts a JavaScript function call or inline JavaScript code that executes when the element gains focus. Example − Input Field Focus Following example demonstrates how to change the ...
Read MoreHow to copy the content of one HTML5 Canvas to another Canvas locally?
The drawImage() method in HTML5 Canvas allows you to copy content from one canvas to another canvas locally within the same web page. This method can draw images, canvases, and videos onto a canvas element, making it perfect for duplicating or transferring canvas content. Syntax Following is the basic syntax for copying canvas content using drawImage() − destinationContext.drawImage(sourceCanvas, dx, dy); Where sourceCanvas is the source canvas element, and dx, dy are the destination coordinates on the target canvas. How Canvas Copying Works To copy canvas content, you need to obtain the 2D ...
Read MoreDisabling Android's chrome pull-down-to-refresh feature with HTML.
The pull-down-to-refresh feature in Chrome for Android automatically refreshes the page when users pull down from the top. While this enhances user experience in most cases, it can interfere with web applications that have their own scrolling interactions or custom refresh mechanisms. The Problem When users interact with custom scrollable content, chat interfaces, or touch-based applications, the browser's pull-to-refresh can trigger unintentionally. This creates a poor user experience where the entire page refreshes when users only intended to scroll within a specific area. Syntax Following is the CSS syntax to disable the pull-down-to-refresh feature − ...
Read MorePreventing an image from being draggable or selectable in HTML without using JS
Images in HTML are draggable and selectable by default, which allows users to drag them to other locations or select them by double-clicking. You can prevent this behavior using CSS properties without requiring JavaScript. CSS Properties for Preventing Image Interaction The following CSS properties control image dragging and selection − user-drag − Controls whether an element can be dragged by the user. user-select − Controls whether the text of an element can be selected. -webkit-user-drag − WebKit-based browsers (Chrome, Safari) specific property for drag control. -webkit-user-select − WebKit-based browsers specific property for selection control. -moz-user-select − ...
Read MoreHTML5 inline video on iPhone vs iPad/Browser
The allowsInlineMediaPlayback property controls whether videos play inline within the webpage or launch in fullscreen mode on iOS devices. By default, iPhones force videos to play fullscreen, while iPads allow inline playback, creating inconsistent user experiences across devices. Understanding this behavior is crucial for web developers creating video content that works seamlessly across all iOS devices and maintains consistent functionality with desktop browsers. Default iOS Video Playback Behavior On iOS devices, video playback behavior differs significantly − iPhone (iOS 9 and earlier) − Videos automatically launch in fullscreen mode, preventing simultaneous display of other content. ...
Read MoreHow to center canvas in HTML5?
To center a canvas element in HTML5, you can use several CSS techniques. The most common approach is to wrap the canvas in a div and apply text-align: center to the container, or use CSS flexbox for more control over positioning. Syntax Following is the basic syntax for centering a canvas element − Method 1 − Using Text-Align Center The simplest way to center a canvas is to wrap it in a div container and apply text-align: center to the div. Since canvas is an inline element ...
Read MoreMaximum size of a element in HTML
The HTML5 element allows you to draw graphics dynamically using JavaScript. However, all web browsers impose limits on the canvas element's maximum width, height, and total area to prevent memory issues and ensure stable performance. Browser-Specific Canvas Size Limits Different browsers have varying maximum size restrictions for canvas elements. Understanding these limits is crucial when developing graphics-intensive web applications. Browser Maximum Width/Height Maximum Area Google Chrome 32, 767 pixels 268, 435, 456 pixels Mozilla Firefox 32, 767 pixels 472, 907, 776 pixels Internet Explorer 8, ...
Read More