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
Web Development Articles
Page 84 of 801
Using HTML5 file uploads with AJAX and jQuery
HTML5 provides robust support for file uploads using AJAX and jQuery, allowing you to upload files asynchronously without page refresh. This approach uses the File API to read file contents on the client side and send them to the server via AJAX requests. Syntax Following is the basic syntax for HTML5 file input − JavaScript FileReader API syntax − var reader = new FileReader(); reader.readAsText(file, 'UTF-8'); reader.onload = function(event) { /* handle result */ }; Client-Side Implementation The client-side code captures the file upload process and uses the ...
Read MoreHTML5 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 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 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 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 MoreHow to properly use h1 in HTML5?
The h1 element in HTML5 defines the most important heading on a page or within a section. Unlike earlier HTML versions, HTML5 allows multiple h1 elements when used properly within sectioning elements like , , , and . The h1 element represents a heading, not a title. Each sectioning element can have its own h1 heading that describes the content of that specific section. The first h1 element in the document body typically serves as the main heading for the entire page. Syntax Following is the basic syntax for the h1 element − Heading Text ...
Read MoreDrawing an image from a data URL to a HTML5 canvas
When working with HTML5 Canvas, you can draw images from data URLs (base64-encoded images) directly onto the canvas. A data URL contains image data encoded as a string, eliminating the need for external image files. This technique is useful for dynamically generated images or when you need to display images stored as base64 strings. Syntax Following is the basic syntax for creating an image from a data URL − var myImg = new Image(); myImg.src = dataURL; Following is the syntax for drawing the image onto the canvas − context.drawImage(image, x, y); ...
Read MoreStreaming a video file to an HTML5 video player with Node.js so that the video controls continue to work
When streaming video files to an HTML5 video player with Node.js, it's essential to implement proper HTTP range request support to maintain video controls functionality. The HTML5 video element relies on partial content requests (HTTP 206) to enable seeking, scrubbing, and progressive loading. How HTTP Range Requests Work The browser sends a Range header (e.g., bytes=0-1023) to request specific portions of the video file. The server responds with a 206 Partial Content status and the requested byte range, allowing the video player to load segments on demand. Basic Video Streaming Setup Following example demonstrates the basic ...
Read More