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 381 of 801
How to stop dragend's default behavior in drag and drop?
To stop dragend's default behavior in drag and drop operations, you need to use preventDefault() and detect if the mouse is over a valid drop target. Here are several approaches to handle this properly. Using preventDefault() Method The most straightforward way is to call preventDefault() in the dragend event handler: Drag me Drop here const dragItem = document.getElementById('dragItem'); const dropZone = document.getElementById('dropZone'); dragItem.addEventListener('dragend', function(event) { event.preventDefault(); console.log('Dragend default behavior prevented'); }); dragItem.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text/plain', event.target.id); }); dropZone.addEventListener('dragover', function(event) ...
Read MoreHTML5 Canvas Degree Symbol
The HTML5 Canvas API allows you to display special characters like the degree symbol (°) in text. You can use HTML entities or Unicode characters to render the degree symbol on canvas. Using HTML Entity for Degree Symbol The most common approach is using the HTML entity ° which renders as the degree symbol (°). body { ...
Read MoreCreating content with HTML5 Canvas much more complicated than authoring with Flash
Flash provided amazing GUI tools and visual features for animations, allowing developers to build multimedia content within a self-contained platform. However, Flash required browser plugins and had security concerns that led to its deprecation. HTML5's element offers a modern, plugin-free alternative for creating graphics and animations using JavaScript. It provides direct access to a drawing context where you can render shapes, images, and complex animations programmatically. Basic Canvas Setup A canvas element requires only width and height attributes, plus standard HTML attributes: Drawing with Canvas Unlike Flash's visual timeline, Canvas ...
Read MoreDetect folders in Safari with HTML5
Safari has limited support for folder detection compared to other browsers. When users drag and drop folders, Safari treats them differently than individual files, which can cause errors during file reading operations. The Problem with Folders in Safari When a folder is dropped onto a web page, Safari includes it in the files collection but cannot read its contents using FileReader. This causes the onerror event to trigger, which we can use to detect folder drops. Folder Detection Method The following code attempts to read each dropped item as a file. If it's a folder, the ...
Read MoreIs HTML5 canvas and image on polygon possible?
Yes, it is possible to draw images on polygons in HTML5 canvas. You can achieve this by creating a pattern from an image and applying it as a fill, or by using transformation matrices to manipulate how the image is drawn within the polygon shape. Method 1: Using Image Patterns Create a pattern using the image object and set it as the fillStyle for your polygon: const canvas = document.getElementById('myCanvas'); const context = canvas.getContext("2d"); // Create an image object const img = new Image(); img.onload = function() { ...
Read MoreStop Web Workers in HTML5
Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the page responsive. Web Workers don't stop by themselves but the page that started them can stop them by calling the terminate() method. Syntax worker.terminate(); Example: Creating and Terminating a Web Worker First, let's create a simple Web Worker script (worker.js): // worker.js self.onmessage = function(e) { let count = 0; while ...
Read MoreMediaStream in HTML5
The MediaStream represents synchronized streams of media content in HTML5. It provides access to audio and video tracks from sources like microphones and webcams. When there are no audio tracks, it returns an empty array, and for video streams, if a webcam is connected, stream.getVideoTracks() returns an array containing MediaStreamTrack objects representing the webcam stream. Getting User Media Access The navigator.mediaDevices.getUserMedia() method is the modern way to access media streams. It returns a Promise that resolves with a MediaStream object: Start Audio async function startAudio() { try { ...
Read MoreHow to delete Web Storage?
Web Storage provides methods to delete stored data from both Local Storage and Session Storage. Understanding how to properly clear this data is essential for maintaining user privacy and managing storage space effectively. Removing Individual Items To delete a specific item from storage, use the removeItem() method with the key name: // Store some data first localStorage.setItem('username', 'john'); localStorage.setItem('theme', 'dark'); ...
Read MoreError codes returned in the PositionError object HTML5 Geolocation
The HTML5 Geolocation API returns specific error codes through the PositionError object when location requests fail. Understanding these codes helps you handle different error scenarios appropriately. Error Codes Reference The following table describes the possible error codes returned in the PositionError object: Code Constant Description ...
Read MoreCancels ongoing watchPosition call in HTML5
The clearWatch method cancels an ongoing watchPosition call. When canceled, the watchPosition call stops retrieving updates about the current geographic location of the device. Syntax navigator.geolocation.clearWatch(watchID); Parameters The clearWatch method takes one parameter: watchID: The ID returned by watchPosition() that identifies the watch operation to cancel Example: Watch and Stop Location Updates var watchID; ...
Read More