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 set the angle of rotation of a Line using FabricJS?
In this tutorial, we are going to learn about how to set the angle of rotation of a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. The centeredRotation property allows us to use the center point of a line object as the ...
Read MoreHow to stop refreshing the page on submit in JavaScript?
In this tutorial, we will learn how to prevent forms from refreshing the page when submitted in JavaScript. By default, form submission causes a page refresh, but there are several methods to override this behavior. Using event.preventDefault() to Stop Page Refresh The event.preventDefault() method is the most common and recommended way to prevent the default form submission behavior. Syntax form.addEventListener('submit', function(event) { event.preventDefault(); // Your custom form handling code here }); Example In this example, we create a simple contact form that prevents page ...
Read MoreHow to set textarea scroll bar to bottom as a default using JavaScript/jQuery?
In JavaScript, you can set a textarea's scroll bar to the bottom using the scrollTop property. This is useful when you want to automatically show the most recent content, such as in chat applications or log displays. Syntax element.scrollTop = element.scrollHeight; Parameters scrollHeight − Returns the total height of the element's content, including content not visible due to overflow. Method 1: Using Pure JavaScript This approach uses the DOM's scrollTop property to position the scroll bar at the bottom of the textarea. ...
Read MoreDetecting arrow key presses in JavaScript?
In JavaScript, detecting arrow key presses is essential for creating interactive web applications like games, navigation systems, and custom input controls. Arrow keys have specific key codes that JavaScript can detect through keyboard events. The four arrow keys have the following key codes: Left arrow: 37 Up arrow: 38 Right arrow: 39 Down arrow: 40 Method 1: Using keyCode with onkeydown The traditional approach uses the keyCode property to identify which arrow key was pressed: JavaScript Arrow Key Detection Click on the page and ...
Read MoreHow do I change a tag\'s inner HTML based on their order in JavaScript?
In JavaScript, you can change a tag's innerHTML based on their order using document.querySelectorAll() or getElementsByClassName(). These methods return collections of elements that you can iterate through and modify based on their position in the DOM. This technique is useful for numbering elements, adding order-based content, or applying different innerHTML to similar elements based on their sequence. Using document.querySelectorAll() The querySelectorAll() method returns a static NodeList containing all elements that match the specified CSS selector(s). Syntax document.querySelectorAll(selectors) Example 1: Basic Order Assignment Here's how to change innerHTML based on element order ...
Read MoreDifference between sum and product of an array in JavaScript
We are required to write a JavaScript function that takes in an array of Numbers as the only argument. The function should calculate the sum of all numbers in the array and the product of all numbers. Then the function should return the absolute difference between the sum and the product. Example Following is the code − const arr = [1, 4, 1, 2, 1, 6, 3]; const sumProductDifference = (arr = []) => { const creds = arr.reduce((acc, val) => { let { ...
Read MoreImplementing a custom function like Array.prototype.filter() function in JavaScript
In JavaScript, the Array.prototype.filter() method creates a new array with elements that pass a test function. Let's implement a custom version to understand how it works internally. Problem We need to create a custom function that mimics Array.prototype.filter(). The function should: Live on the Array prototype Accept a callback function as an argument Call the callback for each array element with the element and its index Include elements in the result array only when the callback returns true Implementation Here's how we can implement our custom filter function: const arr = ...
Read MoreHow to lock the horizontal scaling of a Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal scaling of a Rectangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a rectangle object in the canvas, we can also specify whether we want to stop scaling an object horizontally. This can be done by using the lockScalingX property. Syntax new fabric.Rect({ lockScalingX : Boolean }) Parameters Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using ...
Read MoreHow to set the style of controlling corners of Text using FabricJS?
In this tutorial, we are going to learn how to set the style of controlling corners of Text using FabricJS. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size etc. We can change the style by using the cornerStyle property. Syntax new fabric.Text(text: String, { cornerStyle: String }: Object) Parameters text − This parameter accepts a String which is the text string that we ...
Read MoreWhy split the tag when writing it with document.write()?
In this tutorial, we will learn why to split the tag when writing it with the document.write(). The script tag in HTML is added to execute JavaScript code on the webpage. The JavaScript programs must be enclosed with the script tag to execute. There are many methods in JavaScript that add HTML content to the page, like the document.write() method. The document.write() method is used to delete all the content from the HTML tag or the document and add the content specified in this method to the page. Because of performance degradation and errors in certain conditions, ...
Read More