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 34 of 47
What are the DataTransfer object attributes?
The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set using various attributes and methods associated with the DataTransfer object. The DataTransfer object is automatically created by the browser during drag and drop operations and is available through the event object in drag event handlers. DataTransfer Attributes and Methods Property/Method ...
Read MoreResize image before submitting the form HTML5
To resize an image before submitting a form in HTML5, you can use the HTML5 Canvas API with the drawImage() method. This allows you to scale images on the client-side before sending them to the server. Basic Approach The process involves loading the image into a canvas, scaling it using drawImage(), and then converting the canvas back to an image format for form submission. Syntax context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Parameters img - The image element to draw sx, sy - Source x and y coordinates (usually ...
Read MoreDifference between dragenter and dragover event in HTML5
HTML5 drag and drop API provides several events to handle dragging operations. Two commonly confused events are dragenter and dragover. While both are essential for drag and drop functionality, they serve different purposes. dragenter Event The dragenter event fires when a dragged element enters a valid drop target. This event is used to determine whether the drop target will accept the drop operation. To accept the drop, you must prevent the default behavior by calling preventDefault(). Drag me Drop zone ...
Read MoreWhy HTML5 Web Workers are useful?
JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM. JavaScript will hang your browser in situations where CPU utilization is high. Let us take a simple example where JavaScript goes through a big loop: Big for loop function bigLoop(){ for (var i = 0; i
Read MoreLog error to console with Web Workers in HTML5
Web Workers in HTML5 provide a way to run JavaScript in the background without blocking the main thread. When working with Web Workers, proper error handling is crucial for debugging and maintaining application stability. Error Handling with worker.onerror The worker.onerror event handler catches errors that occur within the Web Worker and allows you to log them to the console for debugging purposes. Example Here's a complete example showing how to implement error handling in Web Workers: Web Worker Error ...
Read MoreHow to check web browser support in HTML5
Checking web browser support for HTML5 features is essential for creating compatible web applications. This guide shows you how to detect HTML5 features using both modern JavaScript methods and the Modernizr library. Using Modernizr Library Modernizr is a popular JavaScript library that detects HTML5 and CSS3 features. Here's how to check for web worker support: Web Worker Support Check function checkWebWorkerSupport(){ ...
Read MoreHow to detect a particular feature through JavaScript with HTML
Feature detection in JavaScript allows you to check if a browser supports specific HTML5 features before using them. This ensures your web application works across different browsers and devices. Using Native JavaScript Feature Detection You can detect features using native JavaScript without external libraries: // Detect audio support function supportsAudio() { return !!document.createElement('audio').canPlayType; } // Detect video support function supportsVideo() { return !!document.createElement('video').canPlayType; } // Detect canvas support function supportsCanvas() { var canvas = document.createElement('canvas'); return !!(canvas.getContext && ...
Read MoreHTML5 IndexedDB Example
IndexedDB is a powerful client-side database API that allows you to store structured data in the browser. Here's how to add data to an IndexedDB database. Setting Up IndexedDB Before adding data, you need to open a database and create an object store: let db; // Open IndexedDB database const request = indexedDB.open("EmployeeDB", 1); request.onupgradeneeded = function(event) { db = event.target.result; const objectStore = db.createObjectStore("employee", { keyPath: "id" }); console.log("Database setup complete"); }; request.onsuccess = function(event) { ...
Read MoreExample of createSignalingChannel() in HTML5
WebRTC enables peer-to-peer communication between browsers, requiring signaling for network information, session control, and media exchange. Developers can implement signaling using various protocols like SIP, XMPP, or custom two-way communication channels. What is createSignalingChannel()? The createSignalingChannel() function establishes a communication channel between peers to exchange connection information before direct peer-to-peer communication begins. This is essential for WebRTC setup. Complete Example var signalingChannel = createSignalingChannel(); var pc; var configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }; // run start(true) to initiate a call function start(isCaller) { ...
Read MoreBlending two images with HTML5 canvas
To blend two images using HTML5 canvas, you need to manipulate pixel data from both images and combine them in equal proportions (50-50). This technique uses the canvas getImageData() and putImageData() methods. HTML Structure First, set up the HTML elements with the images and canvas: Blended image: window.onload = function () { var myImg1 = document.getElementById('myImg1'); var myImg2 = document.getElementById('myImg2'); var myCanvas = document.getElementById("canvas"); var ctx = myCanvas.getContext("2d"); // ...
Read More