Web Development Articles - Page 524 of 1049

To toggle between hiding and showing an element with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    button {       padding: 10px;       border: none;       background-color: rgb(51, 51, 192);       color: white;       font-size: 18px;    }    .div-visible {       width: 100%;       padding: 50px 0;       text-align: center;       background-color: rgb(210, 230, 173);       margin-top: 20px;   ... Read More

The toggle between one button to another button means it allows the user to switch one window to another window, it allows to turn on and off a function, allows to change settings, and provides much more functionality. But in this article we have to write a program with the use of CSS and JavaScript to toggle between like and dislike buttons. To do so, let’s create three separate files for HTML, CSS, and JavaScript − HTML file(index.html) The HTML file is required to create buttons, headings, tags, etc. The HTML file must be saved using the .html file extension. ... Read More

On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices. Compare Fields Set the fields for comparison. For that, you can use the and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. ... Read More

To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin: 0px;       padding: 0px;       height: 150vh; /*To produce scroll bar*/    }    .header {       width: 100%;       background-color: rgb(52, 21, 110);       color: white;       padding: 50px;       font-size: 20px;    }    div.sticky {       position: fixed;       top: 0; ... Read More

To create a gradient background color on scroll, the code is as follows −Example Live Demo    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       background: linear-gradient(          141deg,          #a47dff 0%,          #4e28a7 40%,          #22053d 65%,          #72a4ff 75%       );    } Change Background Gradient on Scroll Example Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. Scroll to see the effect. OutputThe above code will produce the following output −While scrolling the gradient will shift from dark blue to light blue −

The smooth scrolling effect can be set on a web page using the scroll-behaviour property. Set the value to smooth. Check this by implementing scrolling effect on the click of buttons i.e., reaching the below section by clicking a button the top, and vice versa. Let us see how to create a smooth scrolling effect with HTML and CSS. Smooth scrolling for the web page To begin with, under the , set the scroll-behaviour property to implement the property for thr entire web page − html { scroll-behavior: smooth; } Set the two sections The ... Read More

To draw on scroll using JavaScript and SVG, the code is as follows −Example Live Demo    body {       height: 2000px;       background: #f1f1f1;    }    svg {       position: fixed;       top: 15%;       width: 400px;       height: 210px;       margin-left: -50px;    } Scroll Using JavaScript and SVG example    var polygon = document.getElementById("polygon");    var length = polygon.getTotalLength();    polygon.style.strokeDasharray = length;    polygon.style.strokeDashoffset = length;    window.addEventListener("scroll", drawPoly);    function ... Read More

To create a fullscreen window with JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       display: block;       padding:10px;       margin:10px;       background-color: rgb(81, 0, 128);       border:none;       color:white;    } Fullscreen Window with JavaScript Example

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 vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Create a button for the snackbar For the snackbar to appear, you need to click on a button. Create a button using the element − ... Read More

The symbol.description property returns the optional description of the symbol objects and is a read only property.Following is the code for symbol.description property −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.description property CLICK HERE Click on the above button to get the description for the symbols.    let fillEle = document.querySelector(".sample");    let desc = [];    desc.push(Symbol("New").description);    desc.push(Symbol("Hello").description);    desc.push(Symbol.iterator.description);    document.querySelector(".Btn").addEventListener("click", () => {       desc.forEach((item) => (fillEle.innerHTML += item + ""));    }); OutputOn clicking the “CLICK HERE” button −