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 Nancy Den
Page 2 of 18
How to use GoJS HTML5 Canvas Library for drawing diagrams and graphs?
GoJS is a powerful JavaScript library for creating interactive diagrams, flowcharts, organizational charts, and network graphs on HTML5 Canvas. It provides a model-view architecture where Models hold arrays of JavaScript objects describing nodes and links, while Diagrams act as views to visualize this data using actual Node and Link objects. When you construct a diagram with GoJS, it creates an HTML5 Canvas element that gets placed inside a specified DIV element on your web page. This makes it ideal for creating dynamic, interactive visualizations that users can manipulate. Getting Started with GoJS To start using GoJS, you ...
Read MoreHow to draw a star by using canvas HTML5?
Drawing on the HTML canvas is done with JavaScript. The canvas element provides a drawable region controlled by scripting APIs. To draw a star in HTML5, we use the element combined with JavaScript's Canvas API methods like moveTo(), lineTo(), and fill(). The canvas drawing process requires getting the canvas element using getElementById() and obtaining the 2D rendering context with getContext('2d'). Once we have the context, we can draw shapes by defining paths and filling or stroking them. Syntax Following is the basic syntax for creating a canvas and drawing on it − ...
Read MoreOverride HTML5 validation
HTML5 form validation can be overridden using JavaScript by removing validation attributes or preventing the default validation behavior. This is useful when you need custom validation logic or want to bypass built-in constraints. Method 1: Using removeAttribute() The removeAttribute() method removes validation attributes like required from form elements: First Name: Remove Required ...
Read MoreHTML5 applicationCache vs Browser Cache
HTML5 Application Cache and Browser Cache are two different caching mechanisms that serve distinct purposes in web development. Understanding their differences is crucial for optimizing web application performance. HTML5 Application Cache HTML5 Application Cache (AppCache) was a mechanism that allowed web applications to work offline by explicitly defining which resources should be cached. It used a manifest file to specify cacheable resources. // Example manifest file (cache.manifest) CACHE MANIFEST # Version 1.0 CACHE: index.html styles.css script.js logo.png NETWORK: * FALLBACK: / offline.html Browser Cache Browser cache is an automatic caching mechanism ...
Read MoreHow to create JavaScript data grid for millions of rows?
Displaying millions of rows efficiently requires JavaScript grids that use virtual rendering techniques. These grids only render visible rows in the DOM, dramatically improving performance compared to traditional approaches that render all data at once. Popular Data Grids for Large Datasets S. No Grid Description Max Rows ...
Read MoreHow to track pages in a single page application with Google Analytics?
A Single Page Application (SPA) loads all necessary resources on the first page load, then dynamically updates content without full page refreshes. This creates a challenge for Google Analytics, which traditionally tracks page views based on URL changes and page loads. When users navigate within an SPA, the URL may change but no new page actually loads. Google Analytics needs to be manually informed about these navigation events to accurately track user behavior. Setting Up Manual Page Tracking To track page views in SPAs, you need to manually trigger Google Analytics events when the user navigates to ...
Read MoreHow to show image in alert box using JavaScript?
JavaScript's default alert() function cannot display images. To show an image in an alert-like dialog, you need to create a custom modal dialog using HTML, CSS, and JavaScript. Why Default alert() Cannot Show Images The browser's built-in alert() function only accepts text strings. It cannot render HTML elements like images, making a custom solution necessary. Creating a Custom Image Alert Here's a complete example that creates a custom alert dialog with an image: ...
Read MoreHow to send a cross-document message with HTML?
Cross-document messaging allows secure communication between different browsing contexts (windows, iframes, or tabs) using the postMessage() API, even when they have different origins. Syntax targetWindow.postMessage(message, targetOrigin); Parameters message − The data to send (string, object, or any serializable value) targetOrigin − The origin URL of the target window (use "*" for any origin, but specify for security) Example: Sending Message from Parent to Iframe Parent window HTML: Send Message to Iframe ...
Read MoreHow to avoid repeat reloading of HTML video on the same page?
Use preload="auto" to avoid repeat reloading of HTML video on the same page. The preload attribute controls how much video data the browser should load when the page loads. Preload Attribute Options The preload attribute has three possible values: auto - Browser loads the entire video when the page loads metadata - Browser loads only video metadata (duration, dimensions) none - Browser doesn't load any video data initially Example with preload="auto" ...
Read MorePlaying a WAV file on iOS Safari
Playing WAV files on iOS Safari requires specific HTTP headers to ensure proper audio streaming and playback compatibility. Required Headers for iOS Safari iOS Safari needs these HTTP headers to properly handle WAV file playback: Content-Range: bytes 0-1023/2048 Content-Type: audio/wav Accept-Ranges: bytes Content-Length: 2048 Complete Server Implementation Here's a Node.js example showing how to serve WAV files with proper headers: const express = require('express'); const fs = require('fs'); const path = require('path'); const app = express(); app.get('/audio/:filename', (req, res) => { const filename = req.params.filename; ...
Read More