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 530 of 534
Get and Set CSS Variables with JavaScript
To get and set CSS variables with JavaScript, we can use various methods. The getComputedStyle() method gives an object which includes all the styles applied to the target element. The getPropertyValue() method is used to obtain the desired property from the computed styles. The setProperty() method is used to change the value of CSS variable. Syntax /* Getting CSS Variable */ getComputedStyle(element).getPropertyValue('--variable-name'); /* Setting CSS Variable */ element.style.setProperty('--variable-name', 'value'); Methods Used MethodPurpose getComputedStyle()Returns computed styles of an element getPropertyValue()Gets the value of a specific CSS property setProperty()Sets the value of a CSS ...
Read MoreHow to create a quotes slideshow with CSS and JavaScript?
A quotes slideshow is an interactive component that displays inspirational quotes with smooth navigation controls. It combines HTML structure, CSS styling, and JavaScript functionality to create an engaging user experience with previous/next buttons and clickable dot indicators. Syntax .slideContainer { position: relative; max-width: value; } .Slide { display: none; /* Hide all slides by default */ } .prevBtn, .nextBtn { position: absolute; top: 50%; } HTML Structure First, create the HTML structure ...
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 website hosting websites. 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 and JavaScript. Let us see how. Syntax .chat-button { position: fixed; bottom: value; right: value; display: block; } .chat-window { position: fixed; display: ...
Read MoreHow to create a \"coming soon page\" with CSS and JavaScript?
A "coming soon" page is a temporary webpage displayed to visitors before a website launches. This page typically includes an attractive design, launch information, and a countdown timer to create anticipation. We'll create one using CSS for styling and JavaScript for the countdown functionality. HTML Structure First, let's set up the basic HTML structure with a background container and centered content − COMING SOON ...
Read MoreHow to create a fixed/sticky header on scroll with CSS and JavaScript?
A fixed/sticky header remains at the top of the page when users scroll down, providing constant navigation access. This can be achieved using CSS positioning and JavaScript to detect scroll events. CSS Approach The simplest method uses the CSS position: sticky property − .header { position: sticky; top: 0; z-index: 1000; } Example 1: Pure CSS Sticky Header Here's a basic sticky header using only CSS − body { ...
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 vanishes after some time with fade-in and fade-out animations. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Syntax .snackbar { visibility: hidden; position: fixed; bottom: 30px; left: 50%; ...
Read MoreHow to create a \"to-do list\" with CSS and JavaScript?
A to-do list allows you to manage your tasks effectively. When you type what needs to be done and press Enter, the task gets added to the list, and you can continue adding more tasks or click on existing ones to remove them. Syntax /* Input styling */ .todoInput { padding: value; width: value; font-size: value; border: value; } /* List item styling */ li { list-style: none; padding: value; ...
Read MoreHow to create a collapsible section with CSS and JavaScript?
A collapsible section allows you to show and hide content dynamically by clicking on a trigger element. This is commonly used for FAQs, accordions, and content organization. We'll use CSS for styling and JavaScript for the toggle functionality. HTML Structure The basic structure consists of a button (trigger) and a content div that will be shown/hidden − Click to Toggle Hidden content goes here CSS Styling The CSS defines the appearance and initial state. The content is hidden by default using display: none − .collapse ...
Read MoreHow 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 More