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
Create 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 MoreHow to get a number of days in a specified month using JavaScript?
To get the number of days in a specified month in JavaScript, you can use the Date constructor with a clever trick: create a date for the first day of the next month, then subtract one day to get the last day of the target month. The Date Constructor Trick The key insight is that new Date(year, month, 0) returns the last day of the previous month. Since JavaScript months are zero-indexed (0 = January, 1 = February, etc.), passing the actual month number gives us the last day of that month. Basic Implementation ...
Read MoreHow to use window.location to redirect to a different URL with JavaScript?
You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. This happens due to page redirection. JavaScript provides several methods to redirect users to different URLs using the window.location object. This is useful for creating dynamic navigation, handling authentication, or redirecting after form submissions. Common Redirect Methods There are three main ways to redirect using window.location: Method Description Back Button Behavior ...
Read More