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 21 of 47
Detecting HTML click-to-call support in JavaScript
The tel: protocol enables click-to-call functionality on mobile devices. Most modern browsers support it, but older devices may require different protocols or detection methods. Basic tel: Protocol Support Modern mobile browsers support the tel: protocol natively: Click to Call Example Call +1 (234) 567-890 // Check if tel: links are supported function isTelSupported() { ...
Read MoreHTML 5 Video Buffering a certain portion of a longer video
The TimeRanges object in HTML5 allows you to work with buffered portions of video and audio elements. It represents a series of non-overlapping time ranges that have been buffered by the browser. TimeRanges Properties The TimeRanges object provides the following properties: length − Number of buffered time ranges start(index) − Start time of a specific range, in seconds end(index) − End time of a specific range, in seconds Accessing Buffered Ranges You can access buffered ranges using the buffered property of video or audio ...
Read MoreHow to handle mousedown and mouseup with HTML5 Canvas
To handle the mousedown and mouseup events with HTML5 Canvas, you can attach event listeners directly to the canvas element. These events are useful for creating interactive graphics, drag-and-drop functionality, or drawing applications. Basic Syntax canvas.addEventListener('mousedown', function(event) { // Handle mouse press }); canvas.addEventListener('mouseup', function(event) { // Handle mouse release }); Example: Simple Click Detection const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); let mouseDown = false; // Draw initial state ctx.fillStyle = '#f0f0f0'; ctx.fillRect(0, 0, 400, 300); ctx.fillStyle = ...
Read MoreHow can I set the color, style, and width of lines in a single property with CSS?
The border property allows you to specify color, style, and width of lines in one property. This shorthand property combines three individual border properties into a single declaration, making CSS more concise and easier to manage. Syntax border: width style color; Where: width - thickness of the border (e.g., 1px, 2px, thick) style - border style (solid, dashed, dotted, etc.) color - border color (name, hex, rgb, etc.) Example You can try to run the following code to specify the border property: ...
Read MoreMeasure text height on an HTML5 canvas element
To measure text height on an HTML5 canvas element, you can extract the font size from the canvas context's font property or use the TextMetrics object for more precise measurements. Method 1: Extracting Font Size from Font Property Set the font size in points and extract the numeric value: const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); // Set font in points context.font = "15pt Calibri"; // Extract height using regex to match digits var height = parseInt(context.font.match(/\d+/), 10); console.log("Text height:", height, "points"); Text height: 15 ...
Read MoreUsage of border-left-style property in CSS
The border-left-style property defines the style of an element's left border. It accepts various values like solid, dashed, dotted, double, and more to create different visual effects. Syntax border-left-style: value; Available Values Value Description none No border (default) solid Solid line dashed Series of dashes dotted Series of dots double Two parallel lines groove 3D grooved effect ridge 3D ridged effect Example: Different Border Styles ...
Read MorePlaying a WAV file on iOS Safari
Playing WAV files on iOS Safari requires specific HTTP headers to ensure proper audio streaming and playback compatibility. Required Headers for iOS Safari iOS Safari needs these HTTP headers to properly handle WAV file playback: Content-Range: bytes 0-1023/2048 Content-Type: audio/wav Accept-Ranges: bytes Content-Length: 2048 Complete Server Implementation Here's a Node.js example showing how to serve WAV files with proper headers: const express = require('express'); const fs = require('fs'); const path = require('path'); const app = express(); app.get('/audio/:filename', (req, res) => { const filename = req.params.filename; ...
Read MoreChange the color of the bottom border with CSS
The border-bottom-color CSS property changes the color of an element's bottom border. This property only affects the color, not the width or style of the border. Syntax border-bottom-color: color; Parameters The property accepts standard CSS color values including hex codes, RGB values, HSL values, and named colors. Example p.demo { border: 4px solid black; ...
Read MoreHow can I make a div with irregular shapes with CSS3 and HTM5?
With CSS3, you can create various shapes including rectangles, triangles, circles, and more complex irregular shapes using properties like border-radius, transform, and clip-path. Basic Shapes Rectangle A simple rectangle is created using width and height properties: #rectangle { width: 300px; height: 150px; background: blue; } Triangle Triangles are created using border properties with transparent sides: #triangle { width: 0; height: 0; ...
Read MoreChange the color of top border with CSS
The border-top-color CSS property allows you to change the color of an element's top border independently of other borders. This property is useful when you want to create distinctive visual effects or highlight specific elements. Syntax border-top-color: color-value; The color value can be specified using color names, hex codes, RGB values, or HSL values. Example p.demo { border: 3px ...
Read More