Articles on Trending Technologies

Technical articles with clear explanations and examples

What is the usage of oninvalid event in JavaScript?

Smita Kapse
Smita Kapse
Updated on 15-Mar-2026 409 Views

The oninvalid event is triggered when a form field fails HTML5 validation constraints. It fires before form submission when an field with validation attributes (like required, pattern, etc.) contains invalid data. Syntax element.oninvalid = function() { // Handle invalid input }; // Or in HTML Basic Example Here's how to use oninvalid to show custom validation messages: Enter Name: ...

Read More

How to set the maximum height of an element with JavaScript?

Sai Subramanyam
Sai Subramanyam
Updated on 15-Mar-2026 946 Views

Use the maxHeight property in JavaScript to set the maximum height of an element. This property controls how tall an element can grow, with content overflowing when the limit is reached. Syntax element.style.maxHeight = "value"; Parameters The maxHeight property accepts various values: Pixels: "200px" Percentage: "50%" (relative to parent) Keywords: "none" (no limit), "initial", "inherit" Example: Setting Maximum Height #box { width: 300px; background-color: gray; ...

Read More

HTML5 tag on Android for PhoneGap application

George John
George John
Updated on 15-Mar-2026 314 Views

PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. PhoneGap produces apps for all popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile OS etc. HTML5 Audio support is not consistent across different devices due to codec licensing issues and OS implementation. For playing MP3 files, this can be handled by using PhoneGap's Media class that provides reliable audio programming across all platforms. Using PhoneGap Media Class The Media class provides audio recording and playback functionality. Here's how to implement basic audio playback: // Create ...

Read More

Create a text inside circles in HTML5 Canvas

Nishtha Thakur
Nishtha Thakur
Updated on 15-Mar-2026 1K+ Views

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 More

The Keys and values method in Javascript

Samual Sam
Samual Sam
Updated on 15-Mar-2026 369 Views

JavaScript provides several methods to extract keys and values from objects and Maps. The most common approaches are Object.keys(), Object.values() for plain objects, and the keys(), values() methods for ES6 Maps. Getting Keys from Objects Use Object.keys() to extract all property names from an object as an array: const myObject = { key1: "value1", key2: "value2", key3: "value3" }; const keys = Object.keys(myObject); console.log(keys); [ 'key1', 'key2', 'key3' ] Getting Values from Objects Object.values() extracts all property ...

Read More

How to create a unique ID for each object in JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 1K+ Views

In JavaScript, creating unique IDs for objects is essential for tracking and identifying instances. The most reliable method is using Symbol(), which generates guaranteed unique identifiers. Using Symbol() for Unique IDs The Symbol() function creates a unique symbol every time it's called, even with the same description. This makes it perfect for generating unique object identifiers. Unique Object IDs body { ...

Read More

Remove values in an array by comparing the items 0th index in JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 378 Views

When working with arrays of sub-arrays, you may need to remove duplicates based on the first element (0th index) of each sub-array. This is common when dealing with data like subject-marks pairs where you want only unique subjects. Let's say the following is our array: var subjectNameAlongWithMarks = [ ["JavaScript", 78], ["Java", 56], ["JavaScript", 58], ["MySQL", 77], ["MongoDB", 75], ["Java", 98] ]; console.log("Original array:", subjectNameAlongWithMarks); Original array: [ ...

Read More

Figuring out the highest value through a for in loop - JavaScript

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 220 Views

When working with comma-separated strings in JavaScript, you might need to find which value appears most frequently. This tutorial demonstrates how to use a for-in loop to count occurrences and determine the most frequent item. Suppose we have a comma-separated string containing fruit names: const str = 'Banana, Banana, Pear, Orange, Apple, Melon, Grape, Apple, Banana, Grape, Melon, Grape, Melon, Apple, Grape, Banana, Orange, Melon, Orange, Banana, Banana, Orange, Pear, Grape, Orange, Orange, Apple, Apple, Banana'; console.log(str); Banana, Banana, Pear, Orange, Apple, Melon, Grape, Apple, Banana, Grape, Melon, Grape, Melon, Apple, Grape, Banana, Orange, ...

Read More

How to set the amount by which the border image area extends beyond the border box with JavaScript?

Shubham Vora
Shubham Vora
Updated on 15-Mar-2026 292 Views

In this tutorial, we will learn how to set the amount by which the border image area extends beyond the border box in JavaScript. To set the amount by which the border image is extended, you need to set the border outside edges. To do this we can apply the borderImageOutset style property provided in JavaScript. After creating a border image area for the HTML element, we might have to increase the area. By knowing a method to increase the border image area more than the border box, we can make the change without writing lengthy code. Using ...

Read More

How to set the margins of an element with JavaScript?

Swarali Sree
Swarali Sree
Updated on 15-Mar-2026 450 Views

Use the margin property in JavaScript to set the margins of an element. You can access this through the element's style object to modify margins dynamically. Syntax element.style.margin = "value"; element.style.marginTop = "value"; element.style.marginRight = "value"; element.style.marginBottom = "value"; element.style.marginLeft = "value"; Setting All Four Margins You can set all margins at once using the shorthand margin property with space-separated values: Set All Margins This text will have its margins changed. ...

Read More
Showing 18011–18020 of 61,299 articles
Advertisements