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 12 of 534
How to create popups with CSS and JavaScript?
A popup is a modal window that appears on top of the main content when triggered by user interaction. Creating popups with CSS and JavaScript involves styling the popup elements and adding interactive functionality to show and hide the modal. Syntax .popup { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } ...
Read MoreHow to create custom range sliders with CSS and JavaScript?
A range slider is an HTML input element that accepts the type "range". It allows users to select a numeric value within a specified range by dragging a slider handle. Syntax input[type="range"] { -webkit-appearance: none; width: 300px; height: 20px; background: #ddd; border-radius: 5px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #007bff; border-radius: 50%; ...
Read MoreHow 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 More