Found 8894 Articles for Front End Technology

How to Add and Remove multiple classes in jQuery?

AmitDiwan
Updated on 06-Feb-2023 11:54:44

9K+ Views

We can use the jQuery .addClass() method to add multiple classes to an element. We simply need to pass a string of class names separated by a space as the argument. To remove multiple classes, we use the .removeClass() method and pass in the same string of class names. Both of these methods can be chained together to add and remove multiple classes at once. But before proceeding with that let us have a look at what jQuery offers and how it makes web programming easier over plain JavaScript. What is jQuery jQuery is a JavaScript library that simplifies ... Read More

How to add an element horizontally in HTML page using JavaScript?

AmitDiwan
Updated on 06-Feb-2023 11:51:23

2K+ Views

We can use the JavaScript method "createElement" to create a new element. Then, we can use the method "appendChild" to add the element to a parent element on the HTML page. To position the element horizontally, we can use CSS styles such as "display:inline-block" or "float:left/right" on the newly created element. Suppose a situation where we want to depict a graphical representation of a Linked List data structure. Every time the user clicks on a button, a new node, represented by a green circle in our case, should get prepended to the list of nodes horizontally. And the text inside ... Read More

How to add an active class on click event in a custom list group in Bootstrap?

AmitDiwan
Updated on 06-Feb-2023 11:48:16

6K+ Views

We can add an active class to a custom list group item in Bootstrap 4 by using JavaScript or jQuery. This can be achieved by adding an onclick event to each list group item and then using the "addClass" method to add the active class to the item that was clicked. By doing this, we can easily create a custom list group with an active state that changes based on user interaction. Bootstrap Intro Bootstrap is a popular open-source front-end development framework. It helps to create responsive and mobile-first webpages by providing a set of pre-designed CSS and JavaScript ... Read More

How to add a tooltip to a div using JavaScript?

AmitDiwan
Updated on 06-Feb-2023 11:44:48

12K+ Views

To add a tooltip to a div using JavaScript, first create a function that will generate the tooltip content. Next, add an event listener to the div that will call the function and display the tooltip when the div is hovered over. Finally, use CSS to style the tooltip and position it appropriately. A tooltip is a small text box that appears when a user hovers over a specific element on a webpage, such as a button, link, or image. The tooltip typically contains additional information or context about the element that the user is hovering over. Tooltips are commonly ... Read More

How to add a line through to a canvas-type text using Fabric.js?

AmitDiwan
Updated on 06-Feb-2023 11:42:53

389 Views

To add a line through to a canvas-type text using Fabric.js, you can use the "set('textDecoration', 'line-through')" method on the text object. This method allows you to set the textDecoration property of the text object to "line-through", which will add a line through the text. Finally, you need to call the "renderAll()" method to update the canvas with the new text decoration. Fabric.js is a JavaScript library for working with object-oriented canvas graphics. It provides an easy-to-use API for creating and manipulating canvas elements, such as shapes, text, and images. With Fabric.js, you can create complex canvas graphics and animations ... Read More

How to implement multiple input checkbox in vanilla JavaScript?

AmitDiwan
Updated on 06-Feb-2023 11:34:17

632 Views

We will learn how to implement multiple input checkbox. The checkbox input selector will have the following functionalities − Multiple options can be selected using the checkbox. Chosen options will be displayed as a separate list. Delete icon will be provided against each chosen option to uncheck / delete that option. Another thing to note is that we will not be using any third-party library to achieve these functionalities and everything will be written in HTML + JavaScript + CSS only. Approach We will have an object whose key will be used as the label for checkbox ... Read More

How to access a model's data from a view in Backbone.js?

AmitDiwan
Updated on 06-Feb-2023 11:26:57

825 Views

In Backbone.js, views are typically associated with a model and have access to the model's data through the view's this.model property. To access the data of the model in a view, you can use the get() method on the model, passing in the name of the attribute you wish to retrieve. Backbone.js is a lightweight JavaScript library that helps to structure and organize client-side code.Backbone.js provides a model-view-controller (MVC) framework for building web applications. The model represents the data, the view represents the UI, and the controller manages the interactions between the two. This structure allows for a clear separation ... Read More

How to Access element from Table using JavaScript?

AmitDiwan
Updated on 06-Feb-2023 11:20:03

10K+ Views

To access a element from a table using JavaScript, you can first use the document.getElementById() or document.getElementsByTagName() method to access the table element. Then, you can use the table's childNodes property to access the elements within the table. Our focus will be on changing the background color of the current row (the row on which we currently are) when we hover over it and reverting the background color to normal when the mouse goes away.Example Therefore, let’s suppose we have the following HTML code to render a table. ... Read More

How to accept all pending connection requests on LinkedIn using JavaScript?

AmitDiwan
Updated on 06-Feb-2023 11:13:46

357 Views

To accept all pending connection requests on LinkedIn using JavaScript, you would need to use the LinkedIn API and an automation tool. The script would need to navigate to the connection request page and loop through each request, clicking the accept button for each one. This is a very common issue for people who are moderately to highly active on Linkedin. They get many connection requests every day and must manually click on accept against each request to actually accept them. You can, however make use of JavaScript and the window console to automate this whole process and we will ... Read More

How is Ajax different from JavaScript Libraries and Run Time Environments?

AmitDiwan
Updated on 06-Feb-2023 11:10:40

134 Views

The focus of this article will be on what AJAX is, how it works in a nutshell, what makes it such a convenient yet powerful tool and how it is different from JavaScript libraries and JavaScript RunTime Environment. AJAX Introduction and History Ajax, short for Asynchronous JavaScript and XML, is a technique for creating dynamic and interactive web applications. It was first introduced in the early 2000s and has since become a staple of modern web development. The key feature of Ajax is its ability to update parts of a web page without requiring a full page reload. This is ... Read More

Advertisements