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 by Chandu yadav
Page 17 of 81
Usage of CSS list-style-position property
The list-style-position property controls whether list markers (bullets, numbers) appear inside or outside the content area of list items. Syntax list-style-position: inside | outside | initial | inherit; Values outside (default): Markers appear outside the content area inside: Markers appear inside the content area Example: Outside vs Inside Positioning .outside-list { list-style-position: outside; ...
Read MoreUse HTML with jQuery to make a form
To create forms with HTML and jQuery, you can either write static HTML forms or dynamically generate them using jQuery's DOM manipulation methods. Creating a Static HTML Form The basic approach uses standard HTML form elements: Student Details: Student Name: ...
Read MoreWhat's the best way to detect a 'touch screen' device using JavaScript?
The best way to detect a touch screen device is to check whether touch events are supported in the browser's document model. This approach tests for the presence of touch event properties. Basic Touch Detection The most reliable method is to check for the ontouchstart property in the document element: function checkTouchDevice() { return 'ontouchstart' in document.documentElement; } // Test the function console.log("Touch device:", checkTouchDevice()); // Display result on page document.body.innerHTML = "Touch Device: " + checkTouchDevice() + ""; Enhanced Touch Detection Method For better compatibility ...
Read MoreHow to choose between `window.URL.createObjectURL()` and `window.webkitURL.createObjectURL()` based on browser?
When working with file blobs in JavaScript, different browsers may support different implementations of createObjectURL(). Modern browsers use window.URL.createObjectURL(), while older WebKit browsers used window.webkitURL.createObjectURL(). Browser Compatibility Issue The webkitURL prefix was used in older versions of Chrome and Safari, while modern browsers have standardized on URL.createObjectURL(). Creating a Cross-Browser Wrapper Function To handle both cases, create a wrapper function that checks for browser support: function createObjectURL(file) { if (window.URL && window.URL.createObjectURL) { return window.URL.createObjectURL(file); } else if (window.webkitURL) { ...
Read MoreHow to workaround Objects vs arrays in JavaScript for key/value pairs?
When you need key-value pairs in JavaScript, objects are the preferred choice over arrays. Objects provide direct key-based lookup, making data retrieval more efficient than searching through array indices. Why Objects Over Arrays for Key-Value Pairs Arrays use numeric indices and are optimized for ordered data, while objects are designed for key-value associations. Using objects allows you to access values directly by their keys. Basic Object Syntax Store key-value pairs using object literal syntax: var players = { 600: 'Sachin', 300: 'Brad' }; console.log(players[600]); // ...
Read MoreHTML5 and Amazon S3 Multi-Part uploads
Amazon S3 multi-part uploads allow you to upload large files in smaller chunks, providing better reliability and performance. When combined with the HTML5 File API, you can create powerful client-side upload functionality. Overview of S3 Multi-Part Uploads Amazon S3 multi-part upload is a feature that enables you to upload a single object as a set of parts. Each part is a contiguous portion of the object's data, and you can upload these parts independently and in any order. How HTML5 File API Works with S3 The HTML5 File API provides interfaces for accessing files from web ...
Read MoreHTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?
The HTML5 video tag's currentTime property may not work properly in Chrome when your web server doesn't support HTTP range requests (byte-range serving). Chrome requires this feature for video seeking functionality. The Problem When you set currentTime on a video element, Chrome needs to jump to that specific time position in the video file. Without range request support, the browser cannot efficiently seek to arbitrary positions, causing currentTime to be ignored. Testing Your Web Server Check if your server supports byte-range requests using curl: curl --dump-header - -r0-0 http://yourserver.com/video.mp4 Look for this ...
Read MoreHTML5 video full preload in JavaScript
The oncanplaythrough event fires when the browser estimates it can play the video through to the end without stopping for buffering. This is useful for ensuring full video preload before playback. Understanding canplaythrough Event The canplaythrough event indicates the browser has buffered enough data to play the entire video without interruption. This differs from canplay, which only ensures playback can start. Example: Basic Video Preload Detection Video Preload Example ...
Read MoreDoes HTML5 Canvas support Double Buffering?
HTML5 Canvas doesn't have built-in double buffering, but you can implement it manually by creating a second off-screen canvas. This technique prevents flickering during complex animations by drawing to a hidden canvas first, then copying the complete frame to the visible canvas. What is Double Buffering? Double buffering uses two canvases: a visible "front buffer" and an invisible "back buffer". You draw your entire frame on the back buffer, then copy it to the front buffer in one operation. This eliminates the visual artifacts that occur when drawing directly to the visible canvas. Implementation Create an ...
Read MoreHow to stream large .mp4 files in HTML5?
Streaming large MP4 files in HTML5 requires proper video encoding and server configuration to enable progressive download while the video plays. Video Encoding Requirements For HTML5 streaming, MP4 files need special encoding where metadata is moved to the beginning of the file. This allows browsers to start playback before the entire file downloads. Using mp4FastStart The mp4FastStart tool relocates metadata to enable streaming: // Command line usage mp4faststart input.mp4 output.mp4 Using HandBrake HandBrake video encoder includes a "Web Optimized" option that automatically prepares MP4 files for streaming by moving the metadata ...
Read More