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
Front End Technology Articles
Page 623 of 652
How to use Button Component in Material UI?
The button is used to perform some actions like form submission, file upload, link click, web page routing etc. The Material Ui provides the pre-styled button component, which users can import into the React application and use inside the React component. Different variants of the button are available in the Material UI, and users can use any according to their requirements. Execute the below command in the terminal to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Button component of the Material Ui library. Click ...
Read MoreHow to use Box Component in Material UI?
As the Box name suggests, it allows users to add the box of different dimensions on the web page. Users can also add any custom HTML content inside the Box component. Also, users can style the box by passing the style as props. To use the Box component of Material UI, users need to run the below command in the terminal to install the Material library. npm install @mui/material @emotion/react @emotion/styled Syntax Users should follow the syntax below to use the Box component of the Material UI library. Content of the Box. Users can see how ...
Read MoreHow to use API inside callbacks using jQuery DataTables plugin ?
In jQuery, the DataTables plugin allows us to add some extra features to the HTML table. When you create a table using the raw HTML, it looks unformatted. So, we need to style it using CSS. Also, we need to add some functionalities to the table, like pagination, searching into the table, and sorting in ascending and descending order according to a particular column's data. So, this all can take lots of effort from one developer. What if I say we add all functionalities using the DataTables plugin? Yes, you heard right. Here, we will look at the different examples ...
Read MoreHow to use CircularProgress Component in ReactJS?
The circular progress bar is an attractive UI for any application. We can show the circular loading indicator whenever our application fetches data from the server; users are uploading files or downloading data. Here, we will learn different approaches to creating a circular progress bar using the various libraries. Use the React-circular-progressbar NPM Package The react-circular-progressbar is an NPM package, and we can import the ‘circularProgressbar’ component. It takes value as a prop to show circular progress. Users should execute the below command in the terminal to install the react-circular-progressbar NPM package in the React application. npm i react-circular-progressbar Syntax ...
Read MoreHow to shard test files in protractor?
Sharding is a method for distributing data or tasks across several machines to improve performance and scalability. Sharding is a technique used in test automation to distribute test cases among various instances of the testing framework and speed up test execution. Protractor is a testing framework that facilitates sharding test cases using the Jasmine test framework. To shard test files in Protractor, a configuration file must be written that details the path of the test files and the number of instances to be created. To shorten the overall test execution time, Protractor divides the test cases across several instances and ...
Read MoreHow to update mouse location when scrolling with jQuery?
In jQuery, we can trigger the ‘mousemove’ event to detect the mouse pointer's location on the web page. Also, we can detect the scroll using the ‘scroll’ event and subtract that value from the y position to get the relative mouse location. Using the ‘overflow-y: scroll’ CSS property, we can make any div scrollable. Syntax Users can follow the syntax below to get the relative mouse position while scrolling on the div. $('#main').scroll(function (event) { if (finalScroll != $('#main').scrollTop()) { location_y -= finalScroll; finalScroll = ...
Read MoreHow to draw an Image with drawImage() in HTML5?
The "canvas" element merely serves as a container for visuals; drawing the graphics requires the use of a scripting language. It is a procedural, low-level model without an internal scene that updates a bitmap. The drawImage() function is what we employ to draw an image onto a canvas. This feature transfers a video, canvas, or picture to the canvas. Syntax context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height); Where, Img − Determines whether to utilise a video, canvas, or image. Sx − The starting x coordinate for clipping. Sy − The y point at which clipping should ...
Read MoreExplain Class Methods in Coffeescript
To understand the class methods in CoffeeScript first we need to understand what it is CoffeeScript. CoffeeScript is a lightweight programming language, and this language compiles in JavaScript and is also inspired by languages like JavaScript, python, ruby, Haskell, etc. Further, we will discuss it in detail after that we are going to discuss class methods in CoffeeScript with its syntax of it an example with a full explanation and in the end, we conclude it. Introduction of CoffeeScript As we discussed above it is a lightweight programming language that compiles in JavaScript. It is basically an effort to make ...
Read MoreHow to add controls to an audio in HTML5?
HTML5 is a combination of technologies that the user can use for creating more robust and diverse websites and web apps that support multimedia, and communicate with software interfaces, among other things. In this article, we are going to see how we can add controls to audio in HTML5. Syntax The controls attribute of the tag can be used to specify the controls of the embedded audio. It allows the user to technically embed a music player directly in the webpage. The controls attribute adds functionalities such as play, pause, and volume. ...
Read MoreHow to define a piece of computer code in HTML5?
In this article, we will discuss how to define a piece of computer code in HTML5. When creating a website that includes computer programming code, it's necessary to make sure the code is easy to read and stands out from the rest of the text. Here, we are using some tags to define the piece of computer code. Approaches We have two different approaches to defining a piece of computer code in HTML5 including the following − Using the “ element” Using the “ element” Let us look at each step in detail. Approach 1: Using ...
Read More