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
Javascript Articles
Page 121 of 534
Typing and Deleting Effect with JavaScript and CSS
With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript. The infinite effect is also set. The custom function will get called and the words will get display with the effect. At the end, those words will get deleted using another custom function. Set a div for the text and cursor First, a parent div container is set with the element. One of the will have text and another the cursorL | Style the element A professional font is ...
Read MoreHow to create popups with CSS and JavaScript?
A popup appears on the click of a button. Add any key message in it. To close the popup, set a cross symbol on top-right. However, the popups generally close when the mouse cursor is placed somewhere else on the web page. Set a button to open the popup First, create a button that will be clicked by the user to open the popup − Open Popup Set the container for the popup A div is set for the popup. Withing that, a child container is created for the popup content. Within that, set the close symbol using ...
Read MoreHow to create custom select boxes with CSS and JavaScript?
A select box allows you to create a dropdown for users to select a specific value from a list. These generally appear when let’s say you want to a user to select a degree from a list of degrees, favourite sports from a list of popular sports, etc. Let us see how to create custom select boxes with CSS and JavaScript. The color of the select box, the appearance, etc. can be easily changed. Let us see how − Create a container for the select box First, create a container div for the select boxes. Option value 0 is where ...
Read MoreHow to create a tabbed image gallery with CSS and JavaScript?
Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS. Set the images for the thumbnail For our example, we have considered 3 images and added to the web page using the element − Image Thumbnail When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor ...
Read MoreHow to create a snackbar / toast with CSS and JavaScript?
If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Create a button for the snackbar For the snackbar to appear, you need to click on a button. Create a button using the element − ...
Read MoreHow to create a scroll indicator with CSS and JavaScript?
Scroll indicator indicates and animates accordingly. When the scroller goes down, the progess bar suggests how many elements are still remaining. When the scroller takes you to the bottom, the scroll indicator i.e., the progress bar also ends. Let us see how to create a scroll indicator with CSS and JavaScript. Fixed header First, set the position of the header to be fixed using the position property with the value fixed. The header will remain fixed even when the web page navigates to the bottom − .header { position: fixed; top: 0; ...
Read MoreHow to create a quotes slideshow with CSS and JavaScript?
On any thoughts and quotes website, you must have seen the quote slideshow that includes the quote, the celeb name who gave the same quote and the slider. This slider allows moving to the left or right slideshow by clicking separate buttons like arrow keys. Let us see how to create a quotes slideshow with CSS and JavaScript. Set the parent div The div includes the container for the slideshow, the quotes, and the previous and next buttons as well. The quotes are set using the elements. The celeb name who gave the same quote is set as a ...
Read MoreHow to create a popup chat window with CSS and JavaScript?
On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ...
Read MoreHow to create a password validation form with CSS and JavaScript?
On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page. On typing to set the password the validation system will suggest the correct suggestions. Let us see how. Create a form The element is used to create a form on a web page. Two ...
Read MoreLinear gradient with rainbow color
To create a linear gradient that looks like rainbow color, you can try to run the following code - Example #demo { height: 100px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } Linear Gradient Rainbow
Read More