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
Object Oriented Programming Articles
Page 94 of 589
JavaScript Cursor property
The JavaScript cursor property sets or returns the cursor type that will be displayed when hovering over an element. This property allows you to change the mouse cursor appearance dynamically using JavaScript. Syntax element.style.cursor = "cursorType"; Example: Changing Cursor on Button Click body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { ...
Read MoreHow to make a fullscreen window with JavaScript?
The Fullscreen API allows you to display HTML elements in fullscreen mode. This is commonly used for videos, images, or interactive content that benefits from maximum screen real estate. Syntax element.requestFullscreen() // Standard element.webkitRequestFullscreen() // WebKit (Safari, Chrome) element.mozRequestFullScreen() // Firefox element.msRequestFullscreen() // IE/Edge Example: Video Fullscreen body { ...
Read MoreHow to draw on scroll using JavaScript and SVG?
Drawing on scroll using JavaScript and SVG creates an engaging animation effect where an SVG path gradually appears as the user scrolls down the page. This technique uses stroke-dasharray and stroke-dashoffset properties to control path visibility. How It Works The technique uses SVG's stroke-dasharray and stroke-dashoffset properties to hide the path initially, then gradually reveals it based on scroll position. The path length is calculated and used to synchronize the drawing with scroll progress. SVG Path Drawing Animation Initial State (Hidden) ...
Read MoreHow to toggle between a like/dislike button with CSS and JavaScript?
Creating a toggle between like and dislike buttons is a common interactive feature on websites. This article demonstrates how to implement this functionality using HTML, CSS, and JavaScript with Font Awesome icons. HTML Structure The HTML file creates the basic structure with a button containing a thumbs-up icon and display elements for both like and dislike states. Toggle Toggle between a like/dislike button with CSS and JavaScript? ...
Read MoreHow to toggle between hiding and showing an element with JavaScript?
To toggle between hiding and showing an element with JavaScript, you can manipulate the element's display CSS property. This technique is commonly used for creating interactive user interfaces where content needs to be dynamically shown or hidden. Basic Toggle Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } button { ...
Read MoreHow to toggle text with JavaScript?
Text toggling allows you to dynamically change displayed content based on user interaction. This is commonly used for showing/hiding information, switching between states, or creating interactive UI elements. Basic Toggle Example Here's a complete example that toggles between two text values when a button is clicked: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; ...
Read MoreHow to toggle between adding and removing a class name from an element with JavaScript?
JavaScript provides several methods to toggle class names on HTML elements. The most efficient approach is using the classList.toggle() method, which automatically adds a class if it doesn't exist or removes it if it does. Using classList.toggle() Method The toggle() method is the simplest way to switch between adding and removing a class: .highlight { background-color: #3498db; ...
Read MoreHow to add an active class to the current element with JavaScript?
Adding an active class to the current element allows you to highlight the selected item in navigation menus, tabs, or button groups. This technique uses JavaScript event listeners to dynamically manage CSS classes. Complete Example .btn { border: none; outline: none; padding: 10px 16px; background-color: #6ea2f0; cursor: pointer; color: white; ...
Read MoreHow to detect whether the browser is online or offline with JavaScript?
JavaScript provides the navigator.onLine property to detect whether the browser is online or offline. This property returns true when connected to the internet and false when offline. The navigator.onLine Property The navigator.onLine property is a read-only boolean that indicates the browser's online status: // Basic syntax if (navigator.onLine) { // Browser is online } else { // Browser is offline } Example: Manual Check Online/Offline Status Checker Check Status ...
Read MoreImplementJavaScript Auto Complete / Suggestion feature
JavaScript's auto-complete feature helps users by suggesting matching options as they type. This improves user experience and reduces typing errors. We can implement this using HTML5's datalist element combined with JavaScript for dynamic filtering. Understanding the HTML Structure The foundation uses an input field linked to a datalist element. The datalist contains predefined options that appear as suggestions: Complete Implementation body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; ...
Read More