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
Javascript Articles
Page 531 of 534
How to create a scroll indicator with CSS and JavaScript?
A scroll indicator is a visual progress bar that shows how much of a webpage has been scrolled. As users scroll down, the indicator fills up proportionally, providing visual feedback about their reading progress through the content. Syntax /* Fixed header with progress container */ .header { position: fixed; top: 0; width: 100%; } .progressContainer { width: 100%; height: value; background: color; } .progressBar { height: value; ...
Read MoreHow to create a delete confirmation modal with CSS and JavaScript?
A delete confirmation modal is a popup window that asks users to confirm before performing a destructive action like deleting data. This helps prevent accidental deletions and provides a better user experience. Syntax .modal { display: none; position: fixed; z-index: 1; background-color: rgba(0, 0, 0, 0.4); } Example The following example creates a complete delete confirmation modal with CSS styling and JavaScript functionality − body { ...
Read MoreHow to create a Modal Box with CSS and JavaScript?
A modal box is a popup window that displays on top of the current page content. It requires CSS for styling and positioning, and JavaScript for interactive functionality like opening and closing. Syntax .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; height: 100%; background-color: ...
Read MoreHow to create a password validation form with CSS and JavaScript?
Creating a password validation form helps users understand password requirements in real-time. This tutorial shows how to build an interactive password validation form using CSS for styling and JavaScript for dynamic feedback. The validation system provides visual indicators showing whether password criteria are met. HTML Form Structure First, create a basic form with username and password fields. The password field includes a pattern attribute for validation ? Username Password Password Requirements Display Add ...
Read MoreHow to create custom select boxes with CSS and JavaScript?
A custom select box allows you to create a dropdown with complete control over its appearance and behavior. Unlike default HTML select elements, custom select boxes can be styled with any colors, fonts, and animations you want. Let's see how to create custom select boxes using CSS and JavaScript. Syntax .custom-select { position: relative; /* Other styling properties */ } .custom-select select { display: none; /* Hide default select */ } Basic HTML Structure First, create a container div with a ...
Read MoreHow to create a full screen search box with CSS and JavaScript?
A full screen search box is a popular UI pattern that overlays the entire viewport, providing a focused search experience. This implementation uses CSS for styling and positioning, with JavaScript to control the show/hide functionality. Key Components The full screen search box consists of three main parts − Trigger Button: Opens the search overlay Overlay Container: Full screen backdrop with search form Close Button: Hides the search overlay Example Here's how to create a complete full screen search box − body { font-family: ...
Read MoreHow to create an image to zoom with CSS and JavaScript?
Image zoom effects allow users to see enlarged details of an image by hovering over different areas. This is commonly used in e-commerce websites and galleries to provide better product viewing experience. Syntax The image zoom effect combines CSS positioning and JavaScript event handling − .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; } .img-zoom-result { background-image: url(image.jpg); background-size: calculated-size; background-position: calculated-position; } ...
Read MoreHow to create a tabbed image gallery with CSS and JavaScript?
A tabbed image gallery allows users to click on small thumbnail images to view them in a larger format. This creates an interactive way to display multiple images without taking up too much page space initially. Let us see how to create a tabbed image gallery using CSS and JavaScript. Syntax /* Basic thumbnail styling */ .thumbnail { cursor: pointer; transition: transform 0.3s; } /* Modal container */ .modal { display: none; position: fixed; z-index: 1000; ...
Read MoreHow to create a modal image gallery with CSS and JavaScript?
A modal image gallery allows users to view thumbnail images and click on them to open a larger version in a modal overlay. This creates an elegant way to showcase multiple images without cluttering the page layout. Syntax /* Modal container */ .modal { display: none; position: fixed; z-index: 1; background-color: rgba(0, 0, 0, 0.9); } /* Modal image */ .modalImage { display: block; margin: auto; } Example The ...
Read MoreLinear gradient with rainbow color
The CSS linear-gradient function can be used to create beautiful rainbow effects by combining all seven colors of the rainbow spectrum. A rainbow gradient provides a smooth transition from red through violet, creating an eye-catching visual effect. Syntax selector { background: linear-gradient(direction, red, orange, yellow, green, blue, indigo, violet); } Example: Rainbow Linear Gradient The following example creates a horizontal rainbow gradient using all seven spectrum colors − #demo { height: 100px; ...
Read More