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 Lakshmi Srinivas
Page 3 of 24
Full page drag and drop files website with HTML
Creating a full-page drag and drop interface allows users to drop files anywhere on the webpage. This involves detecting drag events and showing a drop zone overlay. HTML Structure First, create the basic HTML with a drop zone overlay: #dropZone { position: fixed; top: 0; ...
Read MoreHow do I programmatically create a DragEvent for Angular app and HTML?
Creating a DragEvent programmatically in JavaScript allows you to simulate drag-and-drop operations for testing or automation purposes. There are different approaches depending on whether you're using browser APIs directly or testing frameworks like Protractor. Creating DragEvent with JavaScript API The most direct approach uses the native DragEvent constructor: // Create a new drag event let dragStartEvent = new DragEvent('dragstart', { bubbles: true, cancelable: true, dataTransfer: new DataTransfer() }); // Get target element let element = document.getElementById('draggable-item'); // Dispatch the event element.dispatchEvent(dragStartEvent); ...
Read MoreHow to style images with CSS?
CSS provides numerous properties to style and enhance images on web pages. You can control dimensions, transparency, borders, filters, and positioning to create visually appealing designs. Basic Image Styling Properties Common CSS properties for styling images include: width/height: Control image dimensions opacity: Set transparency (0 to 1) border: Add borders around images border-radius: Create rounded corners filter: Apply visual effects Setting Image Opacity The opacity property controls image transparency, with values from 0 (fully transparent) to 1 (fully opaque): ...
Read MoreProgrammatically fire HTML5 dragstart after mousemove
To programmatically fire an HTML5 dragstart event after a mousemove event, you need to simulate the drag behavior by creating and dispatching custom events. This approach is useful when you want to initiate dragging based on mouse movement rather than the default drag handle interaction. Basic Implementation Here's how to create a dragstart event after detecting mousemove: Drag me let isDragging = false; const draggableElement = document.getElementById('draggable'); draggableElement.addEventListener('mousedown', function(e) { isDragging = true; console.log('Mouse down - ready to drag'); ...
Read MoreHow to make iOS UIWebView display a mobile website correctly?
To make iOS UIWebView display mobile websites correctly, you need to configure both the webview properties and viewport settings. Here are the most effective approaches: Method 1: Using scalesPageToFit Property The primary solution is enabling automatic scaling in your UIWebView: mywebview.scalesPageToFit = YES; mywebview.contentMode = UIViewContentModeScaleAspectFit; This allows the webview to automatically scale content to fit the device screen width. Method 2: JavaScript Zoom Control For fine-tuned control, inject JavaScript to adjust the zoom level: NSString *js = [NSString stringWithFormat:@"document.body.style.zoom = 0.8;"]; [webView stringByEvaluatingJavaScriptFromString:js]; Method 3: Viewport Meta ...
Read MorePlay video on canvas and preserve the last frame/image on HTML5 Canvas
You can play a video on an HTML5 canvas and preserve the last frame by continuously drawing the video frames onto the canvas. When the video ends, the last drawn frame remains visible on the canvas. HTML Structure First, create the HTML elements for the video and canvas: Your browser does not support the video tag. JavaScript Implementation Here's the corrected code to play video on canvas and preserve the last frame: ...
Read MoreUsage of CSS border-spacing property
The border-spacing CSS property controls the distance between adjacent table cell borders. It only applies to tables with border-collapse: separate and accepts one or two length values. Syntax border-spacing: horizontal vertical; border-spacing: value; /* applies to both directions */ Parameters One value: Sets equal spacing horizontally and vertically Two values: First value sets horizontal spacing, second sets vertical spacing Units: Any CSS length unit (px, em, rem, etc.) Example: Different Spacing Values table { ...
Read MoreDetect area of a PNG that is not transparent with HTML
To detect the non-transparent area of a PNG image in HTML, you need to use the Canvas API to access pixel data and scan for opaque pixels. This technique is useful for cropping images, collision detection, or optimizing sprite sheets. How It Works The process involves loading the image onto a canvas, getting the pixel data as a buffer, and scanning for non-transparent pixels to find the bounding box: Load the PNG image onto a canvas element Get the 32-bit RGBA pixel data using getImageData() Scan from ...
Read MoreHTML5 Input type=number removes leading zero
HTML5's input type="number" automatically removes leading zeros because it treats the value as a numeric data type. This creates issues when you need to preserve leading zeros, such as for international phone numbers, postal codes, or ID numbers. The Problem When using type="number", browsers strip leading zeros from the input value: Show Value function showValue() { let input = document.getElementById('numberInput'); ...
Read MoreHTML5 tag
The HTML5 tag is used to create radial gradients in SVG graphics. It defines a smooth color transition that radiates from a center point outward in a circular pattern, making it perfect for creating lighting effects, shadows, and visual depth in SVG elements. Syntax Key Attributes cx, cy: Center point coordinates of the gradient (default: 50%) r: Radius of the gradient (default: 50%) fx, fy: Focal point coordinates for gradient focus gradientUnits: Coordinate system ("objectBoundingBox" or "userSpaceOnUse") Example: ...
Read More