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 36 of 47
Upload directly to Amazon S3 using Plupload HTML5 runtime
Amazon S3 supports cross-origin resource sharing (CORS), enabling direct HTML5 file uploads from web browsers using Plupload. This eliminates the need for server-side proxies and provides a more efficient upload experience. What is CORS in Amazon S3? Cross-Origin Resource Sharing (CORS) allows web applications running on one domain to make requests to Amazon S3 buckets on a different domain. Without CORS, browsers block these cross-origin requests for security reasons. Setting Up CORS Configuration First, configure your S3 bucket's CORS policy to allow uploads from your domain: { "CORSRules": [ ...
Read MoreOpen a file browser with default directory in JavaScript and HTML?
Opening a file browser with a default directory is not possible in JavaScript due to security restrictions. Web browsers prevent websites from accessing or setting specific file system paths to protect user privacy and system security. Why Default Directory Setting is Restricted Browsers block this functionality for several security reasons: Prevents websites from accessing sensitive system directories Protects user privacy by hiding file system structure Avoids potential security exploits through path manipulation Directory paths may not exist on different operating systems Standard File Input Behavior The HTML file input always opens in the ...
Read MoreEffects and animations with Google Maps markers in HTML5
Google Maps API doesn't provide built-in fade or animation effects for standard markers. However, you can create custom animations by implementing Custom Overlays that give you full control over marker appearance and behavior. Why Custom Overlays? Standard Google Maps markers have limited animation options. Custom overlays allow you to: Control opacity and CSS transitions Create fade in/out effects Add custom animations using CSS or JavaScript Implement bounce, slide, or rotation effects Creating a Custom Overlay Class // Custom overlay class extending Google Maps OverlayView function CustomMarker(position, map, content) { ...
Read MoreWhat are the differences between group and layer in KineticJs with HTML?
In KineticJS, groups and layers serve different organizational purposes when building HTML5 canvas applications. Understanding their differences is crucial for proper scene management. What are Groups? Groups are containers that hold multiple shape objects within a layer. They allow you to treat multiple shapes as a single unit for transformations and event handling. var stage = new Konva.Stage({ ...
Read MoreDraw part of an image inside HTML5 canvas
Drawing part of an image in HTML5 canvas is useful for creating sprites, animations, or displaying specific portions of larger images. The key is using the extended drawImage() method with clipping parameters. Syntax context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Parameters Parameter Description sx, sy Starting coordinates in source image sWidth, sHeight Width and height of clipped area in source dx, dy Destination coordinates on canvas dWidth, dHeight Size to draw on canvas Example: Drawing Part of an Image ...
Read MoreHow to detect point on canvas after canvas rotation in HTML5
When working with HTML5 canvas rotation, detecting the correct coordinates of points becomes challenging because the canvas coordinate system changes. This article shows how to create a transform class to handle point detection after canvas rotation. The Problem When you rotate a canvas, the coordinate system rotates with it. A point at (5, 6) on the original canvas will have different coordinates after rotation. You need to transform these coordinates to match the rotated canvas. Creating a Transform Class Here's a complete Transform class that handles canvas rotations and point transformations: ...
Read MoreCircle Collision Detection HTML5 Canvas
Circle collision detection in HTML5 Canvas involves checking whether two circles intersect by calculating the distance between their centers and comparing it to the sum of their radii. How Circle Collision Detection Works Two circles collide when the distance between their centers is less than or equal to the sum of their radii. If the distance is greater, they don't collide. distance r1 r2 Basic Formula The collision detection formula uses the Pythagorean theorem to calculate distance: distance = Math.sqrt((x2 - x1)² + (y2 - y1)²) collision = distance
Read MoreHTML5 using src using raw binary data
HTML5 allows you to embed binary data directly into src attributes using Data URLs. This is particularly useful when working with files stored in databases or when you need to display content without making separate HTTP requests. Data URL Syntax Data URLs follow this format: data:[mediatype][;base64], data Where: mediatype: MIME type (image/png, audio/mp3, etc.) base64: Optional encoding specification data: The actual binary data (base64 encoded if specified) Using Binary Data with Images For images, you can embed binary data directly in ...
Read MoreUniquely identify files before uploading with the HTML5 file API
While making a file uploader using HTML5 file API, we want to be sure that no duplicate files are uploaded based on actual data. This prevents wasting storage space and bandwidth by uploading identical files multiple times. Calculating a hash with MD5 is not an efficient method as all that happens on the client side and is time-consuming. There is actually no perfect shortcut for this task. Method 1: Basic File Properties Check The simplest approach is to compare basic file properties like name, size, and last modified date: document.getElementById('fileInput').addEventListener('change', function(event) ...
Read MoreRemove a FileList item from a multiple "input:file" in HTML5
When working with HTML5 file inputs, you cannot directly modify the FileList object returned by input.files. The FileList is read-only, so removing items requires converting it to an array first. The Problem The FileList object from file inputs is immutable: Show Files Try Direct Removal function showFiles() { const files = document.getElementById('fileInput').files; document.getElementById('output').innerHTML = 'Files selected: ' + files.length; } function tryDirectRemoval() { const files = document.getElementById('fileInput').files; try { ...
Read More