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 on Trending Technologies
Technical articles with clear explanations and examples
How to return the id of the first image in a document with JavaScript?
To return the id of the first image in a document, use the document.images property in JavaScript. This property returns a collection of all image elements in the document. Syntax document.images[0].id How It Works The document.images collection contains all elements in the document, indexed starting from 0. To get the first image's id, access document.images[0].id. Example Here's a complete example showing how to get the id of the first image: ...
Read MoreHow to set all the border top properties in one declaration with JavaScript?
To set all the border top properties in a single declaration, use the borderTop property. With this property, you can set the border-top-width, border-top-style, and border-top-color property in one statement. Syntax element.style.borderTop = "width style color"; Parameters The borderTop property accepts a string value containing three components: width: Border thickness (e.g., "thin", "thick", "5px") style: Border style (e.g., "solid", "dashed", "dotted") color: Border color (e.g., "red", "#000000", "rgb(255, 0, 0)") Example You can try to run the following code to learn how to work with border-top properties in JavaScript: ...
Read MoreIs there a Microsoft equivalent for HTML5 Server-Sent Events?
HTML5 Server-Sent Events (SSE) provide real-time communication from server to client. While not natively supported in older Internet Explorer versions, there are Microsoft-compatible alternatives to achieve similar functionality. What are Server-Sent Events? Server-Sent Events allow a web page to receive automatic updates from a server through a persistent HTTP connection. Unlike WebSockets, SSE provides unidirectional communication from server to client only. if (typeof EventSource !== "undefined") { var source = new EventSource("/events"); source.onmessage = function(event) { ...
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 MoreUsage of width property with CSS
The width property in CSS is used to set the width of elements, including images. This property accepts values in various units such as pixels (px), percentages (%), em, rem, and other CSS length units. When using percentage values, the width is calculated relative to the containing element's width. Syntax width: value; Common Values Pixels (px): Absolute unit - width: 200px; Percentage (%): Relative to parent container - width: 50%; Auto: Browser calculates width automatically - width: auto; Em/Rem: Relative to font size - width: 10em; Example: Setting Image Width ...
Read MoreSplit Button Dropdowns with Bootstrap
Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. Basic Structure A split button dropdown consists of two buttons wrapped in a btn-group container: Primary button: Performs the main action when clicked Dropdown toggle: Shows/hides the dropdown menu with additional options Example You can try to run the following code to create split button dropdowns: ...
Read MoreHow can Detached DOM elements cause memory leak in JavaScript?
Detached DOM elements are nodes that have been removed from the DOM tree but still exist in memory because JavaScript variables maintain references to them. This prevents the garbage collector from freeing the memory, leading to memory leaks. Understanding DOM Tree Structure The DOM is a double-linked tree structure where each node holds references to its parent and children. When you maintain a JavaScript reference to any node, the entire subtree remains in memory even after removal from the visible DOM. DOM Tree ...
Read MoreHow to get a subset of a javascript object's properties?
To get a subset of an object's properties and create a new object with selected properties, you can use object destructuring combined with property shorthand. This technique allows you to extract specific properties and create a new object containing only those properties. Basic Example Let's start with an object containing multiple properties: const person = { name: 'John', age: 40, city: 'LA', school: 'High School' }; // Extract only name and age const {name, age} = person; const selectedObj ...
Read MoreJavaScript ArrayBuffer Object
In this article, we will learn about JavaScript ArrayBuffer objects. The ArrayBuffer object in JavaScript is a fundamental part of the Web API for efficiently handling binary data. What is ArrayBuffer? The JavaScript ArrayBuffer object represents a generic, fixed-length raw binary data buffer. To manipulate the contents of an ArrayBuffer object we have to create a DataView object as we cannot manipulate the contents directly. We can read and write both using the DataView object. Syntax new ArrayBuffer(byteSize) The byteSize parameter specifies the array buffer size in bytes that will be created. ...
Read MoreJavaScript Immediately Invoked Function Expressions (IIFE)
An Immediately Invoked Function Expression (IIFE) is a JavaScript function that executes immediately after it has been defined. This pattern is useful for creating isolated scope and avoiding global namespace pollution. Syntax (function() { // Code here runs immediately })(); // Alternative syntax (function() { // Code here runs immediately }()); Basic IIFE Example IIFE Example JavaScript IIFE Demo ...
Read More