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
Articles by Nishtha Thakur
Page 3 of 40
HTML5 Audio to Play Randomly
HTML5 Audio API allows you to play audio files randomly by combining JavaScript arrays with the Math.random() method. This technique is useful for music players, games, or any application requiring random audio playback. Setting Up the Audio Collection First, initialize an array of audio sources. Each song should be added to the collection using the init() function: init ([ 'http://demo.com/songs/song1.mp3', 'http://demo.com/songs/song2.mp3', 'http://demo.com/songs/song3.mp3' ]); Complete Random Audio Player Implementation Here's a complete example that creates audio objects and implements random playback: ...
Read MoreWhat is the usage of onblur event in JavaScript?
The onblur event in JavaScript triggers when an HTML element loses focus. This commonly occurs when users click away from an input field, tab to another element, or programmatically change focus. Syntax // OR element.onblur = function() { /* code */ }; // OR element.addEventListener('blur', function() { /* code */ }); Example: Input Field Validation Enter your email and click outside the field: ...
Read MoreCreate a text inside circles in HTML5 Canvas
To create text inside circles in HTML5 Canvas, you need to draw a circle first using context.arc(), then add text at the center using context.fillText(). This technique is useful for creating badges, labels, or interactive elements. Basic Approach The process involves three main steps: Draw a circle using beginPath() and arc() Fill the circle with a background color Add centered text with contrasting color Example: Static Circle with Text var canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d'); // Draw circle context.beginPath(); context.fillStyle = "blue"; context.arc(100, 100, 30, 0, ...
Read MoreCross-browser drag-and-drop HTML file upload?
Cross-browser drag-and-drop file upload can be challenging due to browser differences. Modern browsers support the HTML5 File API, while legacy browsers require fallback solutions. HTML5 Drag and Drop API Modern browsers support native drag-and-drop using the HTML5 File API: Drop files here const dropZone = document.getElementById('dropZone'); // Prevent default drag behaviors ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } // Handle drop dropZone.addEventListener('drop', handleDrop, false); ...
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 MoreWhich is the event when the browser window is resized in JavaScript?
The resize event fires when the browser window is resized. You can listen for this event using window.addEventListener() or the onresize attribute to detect window size changes. The resize Event The resize event is triggered whenever the browser window dimensions change. This includes maximizing, minimizing, or manually dragging the window borders. Method 1: Using addEventListener() Window Resize Event Window Resize Detector Resize your browser window to see the dimensions update: ...
Read MoreWhat is onmouseenter event in JavaScript?
The onmouseenter event triggers when the mouse pointer enters an HTML element. Unlike onmouseover, it doesn't bubble and only fires when entering the target element itself, not its child elements. Syntax element.onmouseenter = function() { // Code to execute }; // Or in HTML Example: Basic Mouse Enter Event Here's how to use the onmouseenter event to display an alert when hovering over text: function sayHello() { ...
Read MoreHow to detect all active JavaScript event handlers?
JavaScript doesn't provide a built-in method to detect all active event handlers on a page. However, there are several approaches to identify event listeners attached to DOM elements. Using jQuery to Detect Event Handlers jQuery provides a convenient way to access event data for elements that have jQuery event handlers attached. Demo Text // Attach jQuery event handler ...
Read MoreHow to store large data in JavaScript cookies?
JavaScript cookies have a size limit of approximately 4KB per cookie, making them unsuitable for storing large amounts of data directly. Here are several effective strategies to handle large data storage needs. Cookie Size Limitations Before exploring solutions, it's important to understand that: Each cookie is limited to ~4KB (4096 bytes) Browsers typically allow 20-50 cookies per domain Total storage per domain is usually limited to 4KB × number of cookies Method 1: Using Session IDs with Server Storage Store large data on the server and use a session ID in the cookie ...
Read MoreImprove performance of a HTML5 Canvas with particles bouncing around
To enhance the performance of HTML5 Canvas with particles bouncing around, several optimization techniques can dramatically improve frame rates and reduce CPU usage. Key Performance Optimization Techniques Separate the calculations from the drawing operations Request a redraw only after updating calculations Optimize collision detection by avoiding O(n²) comparisons Reduce callback usage and function calls Use inline calculations where possible Implement object pooling for particles Example: Optimized Particle System ...
Read More