Web Development Articles - Page 20 of 801

How to add buttons with icons and labels in Material UI?

Tarun Singh
Updated on 30-Oct-2023 10:49:55

3K+ Views

If you are developing a React web application, it is likely that the icons will be used. Icons represent the concept, idea, file, program, application, business, and so on. To define the identity of a feature, you can use icons. An appropriate icon can stand in for a program or application when you do not want to write out its name, so that it is easy to identify. Icons are available in Material UI for use in our applications when building. Icons can also be added with buttons in the Material UI. Now, we’ll be learning how to add buttons ... Read More

How to find whether all element contains same class or not?

Aman Gupta
Updated on 13-Oct-2023 16:04:58

566 Views

Overview A class in any element defines the type of the data contained in an element. A same class name can be taken by another tag or element also. There is no such property for the class attribute that the class name should be unique. To find whether all the elements contain the same classes or not, can be achieved with the help of HTML, CSS and JavaScript. The HTML provides the layout of the page and the layout for the elements for the same classes and the JavaScript will provide the functionality to check whether all the elements contain ... Read More

How to find width of a div using vanilla JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:49:27

2K+ Views

Overview A vanilla JavaScript is a framework of JavaScript, it provides mainly two different methods to find the width of a div using the "offsetWidth" and "clientWidth". Both methods have the ability to find the width of any element on a web page. In this vanilla JavaScript refers to the methods of the JavaScript that are predefined for the developers. It provides cross-platform compatibility. Syntax The Syntax to find the width of the div is given below. These two methods are used to calculate the width of the div. elementHTML.offsetWidth elementHTML.clientWidth elementHTML − It is the div ... Read More

How to find position of HTML elements in JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:44:53

2K+ Views

Overview JavaScript provides various methods for the manipulation and to get the information about the HTML elements. From the several methods JavaScript has its own predefined methods which returns the specific coordinates or position of the HTML element. These two methods are offsetLeft and offsetTop, these two methods return the exact position of the HTML elements. JavaScript also provides another function as getBoundingClientRect() this method also provides the same result as the offset method. The getBoundingRect() has four properties as top, left, right and bottom and the offset has only two properties that are left and top. Syntax The ... Read More

Mobile

How to find class of a clicked element using jQuery?

Aman Gupta
Updated on 13-Oct-2023 15:40:44

3K+ Views

Overview We can easily find the class of the clicked element, the Jquery provides various methods which return the class name of the element when the element is clicked. The Jquery methods "attr()" and using "this.className" properties helps to find the class of an element. So to learn more about these methods we will be seeing the Examples which will cover both the methods. A class name is an attribute which defines the group or type of the data inside the tag. There can be different tags or elements which can contain the same class names but there in case ... Read More

How to find element by text using jQuery?

Aman Gupta
Updated on 13-Oct-2023 15:32:02

2K+ Views

Overview The Jquery consists of a predefined method which makes it easy for the developer to build this feature. The Jquery provides a selector Syntax by which we can find any text element. So the ":contains" selector is used for finding the text in any element. To learn fully about this ":contains" selector we will be developing this feature through an Example. Syntax The Syntax for finding the text in an element is given below − $(selector:contains()); selector − The selector in the above Syntax is termed as any element or class or id name which is ... Read More

How to find average color of an image using JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:30:31

972 Views

Overview The extraction of colors from an image means that the colors which are present in an image in the form of pixels will be extracted, and an average of the pixels of the distinct is calculated in the form of RGB (Red Green Blue) and a new average color will be formed on the basis of the average of the color pixels. So we can achieve this with the help of JavaScript, in the JavaScript there is a property "canvas" which is used to draw an image or any content in the form of pixels. Approach To build this ... Read More

How to find textareas and makes a border using jQuery?

Aman Gupta
Updated on 13-Oct-2023 14:32:13

250 Views

Overview For finding any element Jquery provides the best Syntax for the selector, it gives us a one line code for selecting any element from the HTML document. So to find all the textareas in the HTML we will be using the Jquery selector which will select the textareas and then by using the Jquery CSS(Cascading Styles Sheet) manipulation we will be making a border around the textarea. The border makes a User Interface more attractive. Syntax The Syntax for selecting and styling any element in Jquery is given below $(selector).css(); $(selector) − . For selecting any ... Read More

How to find all selected options of HTML select tag?

Aman Gupta
Updated on 13-Oct-2023 15:27:48

517 Views

Overview To get the selected options from a dropbox we will be using the JavaScript library that is Jquery. The Jquery provides the feature to select and find the options in the optimum lines of code. For this we will be using pseudo selector class ":selected" for the single selection and multiple selection. So for this in the single selection we will directly alert the user and in multiple we will be storing the Output in the array then displaying it on the screen. Syntax The Syntax used in this feature is − $("option:selected").text(); option:selected − The ... Read More

How to find all inputs with a value Green and change the text of next sibling span using jQuery?

Aman Gupta
Updated on 13-Oct-2023 15:25:45

218 Views

Overview Using Jquery we can create this feature, as Jquery library provides the methods for changing the span text to the value of the input value. In this feature we should have a prior knowledge of the basic HTML and the Jquery. So the Jquery provides the methods as next() and text(), these two methods play a vital role in building this feature. We will also use a few styling methods to make the change visible from other normal text. Syntax The Syntax used in this feature is − $(selector).next().text("text"); selector − The selector in the above ... Read More

Advertisements