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
Front End Scripts Articles
Page 8 of 47
How to create or reset counters with JavaScript?
CSS counters provide a way to automatically number elements on a webpage. In JavaScript, you can create or reset counters using the counterReset property to control counter initialization and reset points. How CSS Counters Work CSS counters use three main properties: counter-reset - Creates or resets a counter counter-increment - Increments the counter value counter() - Displays the counter value in content Basic Counter Example body { ...
Read MoreHTML5 audio control stop button
HTML5 audio elements don't have a built-in stop button, but you can create one by combining the pause() method with resetting the currentTime property. Basic Stop Function To stop audio playback, pause the audio and reset its current time to zero: Stop function stopAudio() { var myPlayer = document.getElementById('myAudio'); myPlayer.pause(); myPlayer.currentTime = 0; } Complete Example with Play/Stop Controls Play Stop var audio = document.getElementById('audioPlayer'); function playAudio() { ...
Read MoreHow to set an element's display type with JavaScript?
In JavaScript, you can control an element's visibility and layout behavior by modifying its display property through the DOM. This property accepts various values like block, inline, flex, or none to hide elements completely. Syntax element.style.display = "value"; Where value can be block, inline, flex, grid, none, or other CSS display values. Example: Hiding an Element You can try to run the following code to set an element's display type with JavaScript: ...
Read MoreHTML5 meta name = "viewport" doesn't work as expected
The HTML5 viewport meta tag controls how web pages are displayed on mobile devices. When it doesn't work as expected, it's often due to incorrect syntax or conflicting properties. Common Issues and Solutions Here are the most effective viewport configurations to fix common display problems: Method 1: Standard Responsive Design For most responsive websites, use this configuration: Responsive Page This page adapts to screen width Content scales properly on all devices. ...
Read MoreHow to know whether the border and background of empty cells are hidden or not with JavaScript?
In this tutorial, we will learn how to detect whether empty table cells have hidden borders and backgrounds using JavaScript. This is useful when working with dynamic tables where some cells may be empty. The emptyCells CSS property controls whether borders and backgrounds are displayed for empty table cells. JavaScript provides methods to check and modify this behavior programmatically. Understanding Empty Cells Empty table cells can either show their borders and backgrounds or hide them completely. The empty-cells CSS property has two values: show - Display borders and backgrounds for empty cells (default) hide - ...
Read MoreHow to set the brightness and contrast of an image with JavaScript?
JavaScript provides the CSS filter property to adjust image brightness and contrast dynamically. You access these filters through the style.filter property on image elements. Syntax element.style.filter = "brightness(value) contrast(value)"; Parameters Filter Default Value Range Effect brightness() 100% 0% to 200%+ 0% = black, 100% = normal, 200% = very bright contrast() 100% 0% to 200%+ 0% = gray, 100% = normal, 200% = high contrast Example: Interactive Brightness and Contrast Click below to change the brightness ...
Read MoreGetting Safari to recognize HTML 5
Safari versions prior to 7.0 don't recognize HTML5 semantic elements like , , , and . These elements are treated as inline by default, which can break your layout. The Problem In older Safari browsers, HTML5 elements don't have default block-level styling, causing layout issues when you expect them to behave like elements. Solution: CSS Display Block The key is to explicitly set display: block for HTML5 semantic elements: main { display: block; width: 800px; height: 800px; ...
Read MoreHow to set the left position of a positioned element with JavaScript?
To set the left position of a positioned element in JavaScript, use the style.left property. This property works on elements that have a CSS position value of absolute, relative, or fixed. Syntax element.style.left = "value"; The value can be specified in pixels (px), percentages (%), or other CSS units like em, rem, etc. Example Here's how to change the left position of a button when clicked: #myButton { ...
Read MoreFilter gray image, black around png in Internet Explorer 8
In Internet Explorer 8, applying grayscale filters to PNG images often creates unwanted black backgrounds. This happens because IE8's filter system doesn't handle PNG transparency properly when multiple filters are applied. The Problem When using BasicImage(grayscale=1) filter on PNG images with transparency in IE8, the transparent areas become black instead of remaining transparent. Solution: Combining Gradient and BasicImage Filters The solution is to combine a transparent gradient filter with the grayscale filter in a single filter declaration: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF) progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) Complete CSS Implementation .demo { background: ...
Read MoreHow to set the boldness of the font with JavaScript?
Use the fontWeight property in JavaScript to set the font boldness. This CSS property accepts values like "normal", "bold", "bolder", "lighter", or numeric values from 100 to 900. Syntax element.style.fontWeight = value; Parameters The fontWeight property accepts the following values: Value Description "normal" Default weight (equivalent to 400) "bold" Bold weight (equivalent to 700) "bolder" Bolder than parent element "lighter" Lighter than parent element 100-900 Numeric values (100 = thinnest, 900 = boldest) Example: Setting Font Weight with ...
Read More