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
Articles by Mohit Panchasara
Page 5 of 7
How to place Font Awesome icon to input field?
In many cases, developers require to place an icon inside the text input or particular HTML element. For example, we are creating a form containing multiple inputs. If we put the icon related to the form input field inside the input, we can create a better UI and attractive design for the application. In this tutorial, we will use the font-awesome library to add the icon on the web page. Also, we will manipulate the CSS code to place the icon inside the input field. Syntax Users can follow the syntax below to place an icon inside the input field. ...
Read MoreHow to perform jQuery Callback after submitting the form?
Nowadays, every website contains at least a single form, such as a contact form, application form, etc. It is also required to notify users when the form is submitted successfully or with errors so that users can take action again. In JQuery, we can use the submit() method to call the callback function after submitting the form. However, we can also save form data to the database in the callback functions. So, there can be many use cases where we must call the callback function after submitting the form to perform the particular operations. Syntax Users can follow the syntax ...
Read MoreHow to perform a real time search and filter on a HTML table?
When developers develop a real-time web application, they need to deal with a large amount of data. For example, we have listed 1000 product data in the table format on the web page. If users want to find any particular product from the table, they need to scan the whole table by scrolling through it, which is a very bad user experience. So, it is necessary to add a search functionality to the table to allow users to search for any specific data in the table. Here, we will learn to add search functionality to the table using JavaScript and ...
Read MoreWhat is CSS sprites and how to implement them on a page?
What are Sprites in CSS? In CSS, sprites are techniques used to which we can use to decrease the number of HTTP requests by the web browser. In this technique, we require to combine multiple images in a single image. After that, we can set the single image for every image element’s background and also required to set the position to show the particular image from the combined image. Here, we can combine the different images in a single image using the image editing tools such as Photoshop, paint, etc. After that, we can use that single image with different ...
Read MoreWhat is CSS Flexbox?
As a beginner developer, learning about CSS flexbox is important. It also helps to make the responsive web design easy by optimizing the spaces of the element. The CSS flexbox is a layout model that we can use to arrange the child items better. It also changes the flex items' dimensions if the flexbox's content is overflowing and tries to show all content of the web page. Terminology of CSS Flexbox In this section, we will learn about the basic terminology used while using the CSS flexbox layout. Flex container − It is an HTML element for which we ...
Read MoreWhat are the real world usage of CSS with SVG?
Developers use CSS to style the web page's content and represent it properly. It can be used to make any content attractive. The full form of the SVG is the scalable vector image. The SVG is one type of image like a jpg or png. The jpg or png are raster images created using the grids of the pixels. If we zoom in on the raster images, it starts getting blurry. The vector image is created using the mathematical functions which draw vectors and joins them to make a shape. As it is not a grid of pixels, it never ...
Read MoreWhat are the Materialize Classes of Dropdowns?
Materialize is a front-end development framework that developers can use to style web pages, and it follows Google’s material design guidelines. It contains the different HTML components, which are pre-designed with CSS and pre-functional with JavaScript, and one of them is the dropdown. The dropdown is useful whenever developers want to allow application users to select either single or multiple options from all options available. It provides a Basic pre-styled dropdown menu; however, we can customize it. Also, some properties are available for dropdowns which we can use to customize. For example, the ‘isOpen’ property returns a boolean value based ...
Read MoreHow to switch between multiple CSS stylesheets using JavaScript?
In this tutorial, we will learn to switch between multiple CSS stylesheets using JavaScript. Have you ever thought that when you toggle the theme of TutorialsPoint’s website, how it changes the CSS of the whole website? Here is a simple answer. When the user presses the button, it switches the CSS stylesheets for the website like it removes the stylesheet for the white theme and adds the stylesheet for the dark theme. Here, we will see examples of switching between multiple CSS files using JavaScript. Syntax Users can follow the syntax below to switch between multiple CSS files using JavaScript. ...
Read MoreVarious tricks for :before pseudo elements using position property in CSS
Generally, we add content to the web page using HTML and style the content using CSS. The CSS contains some pseudo-selectors, such as ‘:before’, and we can use it to add content to the web page before any HTML element. Sometimes, developers don’t want to put the content before the HTML element using the ‘:before’ selector, but they require to position the content. For example, if we use the ‘:before’ selector to add an icon before the text, we require space between the text and the icon. So, we need to change the icon's position using the CSS position property. ...
Read MoreLogical Properties in CSS
In CSS, logical properties allow developers to define the style based on the logical structure of the web page rather than the physical layout. It means we can apply the CSS according to the text direction or content flow. Mainly logical properties are used to set the HTML element's margin, padding, and border. It contains different variants of the margin, padding, and border property. Logical properties can be defined according to the block and inline dimensions. Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left ...
Read More