Found 8591 Articles for Front End Technology

How to change character spacing of text canvas using Fabric.js?

Gungi Mahesh
Updated on 21-Feb-2023 15:59:57

816 Views

The fabric.Text object of Fabric.JS is used to change the corner style of a canvas-type text. Text class of Fabric.js provides the text abstraction by using the fabric.Text object, which allows us to work with text in an object-oriented way. Comparing to the canvas class the Text class provides the rich functionality. The text object contains the different properties, but to change the character spacing of a text canvas can be done using one of the property i.e., charSpacing. This property sets the spacing between characters in pixels. You can also use the setCharSpacing method to changing the spacing of ... Read More

How to Change the Background Color of a Div on Mouse Move Over using JavaScript?

Gungi Mahesh
Updated on 21-Feb-2023 15:51:24

3K+ Views

The mouseover event is used in the JavaScript code to change the color of background to an elements of HTML. We also want to restore the color to blue after removing our mouse from the element. As a result, we have also used the mouseout event. This will happen when we remove our mouse pointer from the element. getElementById() produces an object of element which represents the element whose id attribute matches the provided string. Because element IDs must be unique if supplied, they're a convenient method to rapidly retrieve a single element. The addEventListener() function is employed to ... Read More

How to create a function `generateSelector` to generate CSS selector path of a DOM element ?

Saurabh Anand
Updated on 21-Feb-2023 17:38:14

336 Views

The generateSelector method is a helpful tool for determining the path to a specific portion of a website known as a DOM element. Understanding how CSS selectors work and how to build them can be useful in a variety of situations, such as testing automation or the construction of shortcuts for easy element selection. We will discuss the function's concept and offered a clear example of how to use it in this article. Imagine you want to make a change to one specific element on a website. But how do you know what selector to use? That's where our ... Read More

How to create a button that submits a form and downloads a pdf simultaneously?

Saurabh Anand
Updated on 21-Feb-2023 17:33:07

3K+ Views

By using HTML, JavaScript and jsPDF, we can create a button that can submit the form and download a pdf simultaneously. We will use HTML to create a form, JavaScript to handle the submission process and jsPDF to generate the PDF document. The act of submitting a form and getting a PDF is among the most frequent use cases. On the internet, PDFs are a common format for documents. They may be used to keep track of contracts, invoices, and other crucial data. In many instances, submitting a form is required before receiving a PDF. Let’s discuss the complete procedure ... Read More

How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?

Saurabh Anand
Updated on 21-Feb-2023 17:31:43

8K+ Views

Using Bootstrap, we will create a Bootstrap spinner and display it on the screen until data from an API is loaded. This will give customers visual indications that something is going on in the background and can be an excellent method to improve the user experience. In this blog, we will be utilizing Bootstrap, a famous front-end programming framework. Follow the below steps to create a Bootstrap spinner and display on screen till the data from the API loads - Step 1: Include the Bootstrap CSS and JavaScript Files We will begin with our first step by importing JavaScript ... Read More

How to Create a Binary Calculator using HTML, CSS and JavaScript?

Saurabh Anand
Updated on 21-Feb-2023 17:29:03

1K+ Views

A binary calculator is a program that performs mathematical calculation on binary numbers. Now, as of you remember the binary numbers are those numbers which are formed from only two numbers i.e., 0 and 1. In this blog, we will use this program to calculate addition, subtraction, multiplication and division on binary numbers. This will be a basic calculator that will use basic concepts of HTML, CSS and JavaScript to do the same. So, let’s get started with the HTML structure. HTML Structure Firstly, we will make a form which will be divided into table rows giving features like ... Read More

How to create 3D Geometries in webGL and p5.js?

Saurabh Anand
Updated on 21-Feb-2023 17:27:50

829 Views

Creating 3D geometries in webGL and p5.js is a powerful way to create interactive and visually interesting web applications. With the ability to create basic shapes, add textures, lighting, and materials, and transform 3D geometries, we can create a wide range of 3D graphics and animations. By understanding the basics of webGL and p5.js, we can create stunning 3D geometries for their web applications. 3D Shapes creation The first step is to generate some 3D geometries using webGL and p5.js built-in functions. These shapes can be produced using the library's built-in methods, such as sphere(), box(), and cylinder(). ... Read More

How to count the number of times a button is clicked using JavaScript?

Saurabh Anand
Updated on 21-Feb-2023 17:26:33

18K+ Views

Tracking button clicks is a common task in JavaScript and can be achieved by using the addEventListener() method. By adding an event handler method to the button element and incrementing a variable each time the button is pressed, we can simply keep track of button clicks. We can quickly show the user how many clicks there have been by showing that information on a web page and keeping the clicks in localStorage. We can even save the clicks even after the user shuts the browser. Suppose we are building a simple calculator then we will need buttons that can ... Read More

How to count text lines inside of a DOM element?

Saurabh Anand
Updated on 21-Feb-2023 17:21:47

3K+ Views

Introduction Before understanding the counting of the lines in a DOM, let's first understand what DOM is? So, DOM is like an API for HTML and XML documents. This logic is enough to understand that DOM is an important concept for web developers. The DOM gives a programming interface for HTML and XML documents that gives programmers control over a webpage's structure, look, and content. So, in this article we will see how to count the number of lines in the given text on the web page in a DOM element. Method 1: Using the scrollHeight Property Making ... Read More

How to copy the content of a div into another div using jQuery?

Saurabh Anand
Updated on 21-Feb-2023 17:16:52

8K+ Views

We can use jQuery html() method to copy the content of a div into another div. In jQuery, many other methods, such as clone(), append() & appendTo(), etc., can be used to copy the content. jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. In this tutorial, we will use different methods in jQuery to copy the content of one div into another div. Using the html() Method Using the jQuery html() function is the simplest approach to copy the content of a div into ... Read More

Advertisements