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
Programming Scripts Articles
Page 14 of 33
Apple Touch icon for websites in HTML
Apple Touch Icons are custom icons that appear when users add your website to their iPhone or iPad home screen. These icons replace the default website screenshot with a professional-looking app-style icon. Basic Apple Touch Icon To add a basic Apple Touch Icon, include this in your HTML section: This creates a bookmark icon when users tap the share button and select "Add to Home Screen" on iOS devices. Multiple Sizes for Different Devices Different Apple devices require different icon sizes. Use the sizes attribute to specify multiple icons: ...
Read MoreZoom HTML5 Canvas to Mouse Cursor
The HTML5 Canvas API provides powerful methods to zoom content toward a specific point, such as the mouse cursor. By default, the canvas scales from its origin at [0, 0], but you can change this behavior using coordinate transformations. Understanding Canvas Transformations The translate() method moves the canvas origin to a new position, while scale() resizes the drawing context. To zoom toward the mouse cursor, you need to combine these transformations in a specific sequence. The Zoom Algorithm To zoom toward a specific point (like mouse coordinates), follow these three steps: ctx.translate(pt.x, pt.y); ...
Read MoreHow can I make a browser to browser (peer to peer) connection in HTML?
Creating browser-to-browser (peer-to-peer) connections in HTML can be achieved using WebRTC technology. The PeerJS library simplifies this process by providing an easy-to-use API for establishing P2P connections. Include the PeerJS Library First, include the PeerJS library in your HTML file: Create a Peer Connection Initialize a new peer with a unique ID. PeerJS provides free public servers, so no API key is required: // Create a new peer with a unique ID var peer = new Peer('peer-' + Math.floor(Math.random() * 1000)); // Listen for incoming connections peer.on('connection', function(conn) ...
Read MoreHow to clear a chart from HTML5 canvas so that hover events cannot be triggered?
To completely clear a chart from an HTML5 canvas and ensure hover events are no longer triggered, the most effective approach is to remove the canvas element and create a new one. This method guarantees all event listeners and chart data are cleared. Method 1: Remove and Recreate Canvas Element This approach removes the existing canvas and creates a fresh one, eliminating all associated event listeners and chart data. var resetCanvas = function(){ // Remove the existing canvas $('#results-graph').remove(); ...
Read MoreHow to draw grid using HTML5 and canvas or SVG?
HTML5 provides two powerful ways to create grid patterns: Canvas and SVG. Both offer different advantages depending on your needs. Drawing Grid Using HTML5 Canvas Canvas provides a pixel-based approach for drawing grids programmatically. Here's how to create a basic grid: // Get canvas and context const canvas = document.getElementById('gridCanvas'); const ctx = canvas.getContext('2d'); // Grid settings const gridSize = 20; // Size of each grid cell const canvasWidth = canvas.width; const canvasHeight = canvas.height; // Set line style ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1; // Draw vertical lines for (let x = 0; x
Read MoreHTML 5 video or audio playlist
HTML5 provides the onended event that fires when audio or video playback completes. This event is essential for creating video playlists, showing completion messages, or automatically loading the next media file. Basic onended Event Example The onended event allows you to execute JavaScript when media playback finishes. Here's a simple example that shows a message: Your browser does not support the video ...
Read MoreConverting video to HTML5 ogg / ogv and mpg4
Converting videos to HTML5-compatible formats (OGG/OGV and MP4) ensures cross-browser compatibility for web video playback. HTML5 video elements require specific codecs and containers that not all browsers support uniformly. Why Convert to HTML5 Video Formats? Different browsers support different video formats. To ensure maximum compatibility, you need multiple formats: MP4 (H.264) - Supported by most modern browsers OGG/OGV (Theora) - Open source format, supported by Firefox and older browsers WebM - Google's format, widely supported Using Free HTML5 Video Player And Converter This third-party software simplifies the conversion process with preset configurations optimized ...
Read MoreHow can I add video to site background in HTML 5?
HTML5's element allows you to create stunning background videos that automatically play and loop behind your content. This technique is commonly used for modern, engaging websites. HTML Structure The basic HTML structure requires a video element with specific attributes for background functionality: #myVideo { position: fixed; right: 0; ...
Read MoreGenerating sound on the fly with JavaScript/ HTML5
The Web Audio API is used to control audio, which allows you to choose audio sources. You can also add effects, create audio visualizations, panning, and generate sounds programmatically in web browsers. Basic Sound Generation To generate sound with the Web Audio API, you need three main components: an AudioContext, an oscillator (sound source), and a destination (speakers). Here's how to create a simple tone: Generate Sound Play 500Hz Tone ...
Read MoreDoes HTML5 allow you to interact with local client files from within a browser?
HTML5 allows web applications to interact with local client files through powerful APIs. These interfaces enable browsers to access the user's file system, read binary data, and handle file operations that were previously impossible with standard web technologies. HTML5 File APIs HTML5 provides three main APIs for file interaction: File API - Read file contents and metadata File System API - Access file system structure (deprecated in modern browsers) File Writer API - Write data to files (limited browser support) Reading Local Files The ...
Read More