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 27 of 47
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 MoreConvert text to lowercase with CSS
To convert text to lowercase with CSS, we will be using the lowercase value of text-transform property. Syntax selector { text-transform: lowercase; } Example In this example, we are using text-transform property and displaying the result as before and after the conversion using p tag. #lcase { text-transform: lowercase; } ...
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 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 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 More