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
Articles on Trending Technologies
Technical articles with clear explanations and examples
HTML5 check if audio is playing
In HTML5, you can check if an audio element is currently playing by using the paused property. This property returns a boolean value indicating whether the audio is paused or playing. Syntax Following is the basic syntax to check if audio is playing − audioElement.paused The paused property returns false when the audio is playing and true when it is paused or stopped. Using a Function to Check Audio Status Following function checks if an audio element is currently playing − function isPlaying(audelem) { return !audelem.paused; ...
Read MoreHTML DOM Pre Object
The HTML DOM Pre Object represents the element in the Document Object Model (DOM). The element is used to display preformatted text, where whitespace and line breaks are preserved exactly as they appear in the HTML source. The Pre Object provides access to all the properties and methods of a standard HTML element, plus specific functionality for handling preformatted text content. Syntax To create a new pre element using JavaScript − document.createElement("PRE"); To access an existing pre element − document.getElementById("preId"); Creating a Pre Object You can ...
Read MoreHow do we add a table row in HTML?
In this article, we will learn to add a table row in HTML. Tables are a fundamental part of web development, used to display structured data in rows and columns. In HTML, you can add table rows using the (table row) element inside a structure. Syntax Following is the syntax for adding a table row in HTML − Cell content Cell content Basic Table Structure Before adding rows, let's ...
Read MoreHow do I add a simple onClick event handler to an HTML5 canvas element?
The HTML5 canvas element creates a drawing surface where shapes and graphics are rendered as pixels, not DOM elements. Unlike regular HTML elements, canvas drawings have no built-in click detection. To handle click events on canvas shapes, you must capture clicks on the canvas element itself and calculate which drawn shape was clicked based on coordinates. Syntax Following is the syntax to add a click event listener to a canvas element − canvas.addEventListener('click', function(event) { // Handle click event }, false); How Canvas Click Detection Works Canvas click detection involves ...
Read MoreHow to save HTML Canvas as an Image with canvas.toDataURL()?
The HTML5 Canvas provides the toDataURL() method to export canvas drawings as image data URLs. This method converts the canvas content into a base64-encoded data URL, typically in PNG format, which can be used to save, display, or download the canvas as an image file. Syntax Following is the syntax for the toDataURL() method − canvas.toDataURL(type, encoderOptions) Parameters type (optional) − A string indicating the image format. Default is "image/png". Other supported formats include "image/jpeg" and "image/webp". encoderOptions (optional) − A number between 0 and 1 indicating image quality ...
Read MoreHTML5 geolocation 'permission denied' error in Mobile Safari
When developing mobile websites that request the user's current location on button click, HTML5 Geolocation API is commonly used. While this functionality works seamlessly in Mobile Chrome, Mobile Safari often encounters permission denied errors even when users grant location access. This issue occurs because Mobile Safari has stricter security policies and requires additional system-level permissions to be enabled. The geolocation request may fail silently or return a permission denied error despite user consent in the browser prompt. Understanding the Geolocation API The HTML5 Geolocation API allows web applications to access a user's geographical location through the navigator.geolocation ...
Read MoreClient Checking file size using HTML5
HTML5 provides a built-in File API that allows client-side file size checking without requiring Flash or server-side processing. This approach improves user experience by validating files before upload and provides immediate feedback to users. The File API is part of the HTML5 specification and is supported by all modern browsers. It allows JavaScript to access file properties including name, size, type, and last modified date through the files property of file input elements. Syntax Following is the basic syntax to access file size using the File API − var fileSize = document.getElementById('fileInput').files[0].size; The ...
Read MoreHow to use an animated image in HTML page?
Animated images in HTML are visual elements that display moving graphics on a web page. They are typically in GIF format (Graphics Interchange Format), which supports animation by storing multiple frames in a single file that play in sequence. We use the tag with the src attribute to add an animated image in HTML. The src attribute specifies the URL or file path of the animated image. You can also control the display size using the height and width attributes or CSS styling. Syntax Following is the basic syntax for adding an animated image − ...
Read MoreBootstrap dropdown closing when clicked in HTML
Bootstrap dropdowns automatically close when you click outside the dropdown area or on a dropdown item. Sometimes you may want to prevent the dropdown from closing when users click inside the dropdown content, allowing them to interact with forms, checkboxes, or other elements without the dropdown disappearing. Syntax Following is the syntax to prevent dropdown from closing using the hide.bs.dropdown event − $('#dropdownId').on('hide.bs.dropdown', function () { return false; }); Following is the syntax to prevent dropdown closing using stopPropagation() − $('#dropdownId .dropdown-menu').on('click', function(e) { ...
Read MoreChange text color based on a brightness of the covered background area in HTML?
Changing text color based on the brightness of the background ensures optimal readability and contrast. This technique calculates the luminance of the background color and automatically selects either black or white text for maximum visibility. How It Works The brightness calculation uses the relative luminance formula that weights RGB values according to human eye sensitivity. The formula gives more weight to green (587), moderate weight to red (299), and less weight to blue (114) since our eyes are most sensitive to green light. Syntax The luminance calculation formula is − var luminance = ((red ...
Read More