Front End Technology Articles - Page 365 of 652

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

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 JavaScript DataView allows us for reading and writing in multiple number types in binary ArrayBuffer by providing a low level interface. We cannot manipulate ArrayBuffer directly without using DataView().Following is the code for implementing JavaScript DataView −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       font-size: 20px;       font-weight: 500;    } JavaScript DataView() CLICK HERE Click on the above button to change the array buffer contents using DataView()   ... Read More

In JavaScript, the clearTimeout() and clearInterval() methods are used to clear timers. When we set a timer using setTimeout() or setInterval() methods, the browser allocates memory to track it. Therefore, we use these methods to release that memory and avoid unnecessary function calls. It is best practice to clear timers when they are no longer needed. In this article, we will learn how the clearTimeout() and clearInterval() methods help to clear timers. JavaScript clearTimeout() method The clearTimeout() method in JavaScript clears the timeout that has been previously set by the setTimeout() function. It accepts a single integer value as a ... Read More

The floats in CSS defines how an element should float. Let’s say, an element is taller than the element containing it. If it is floated, it will overflow outside of its container. Therefore, it’s hack is to use the overflow property and set the value auto. Without Clearfix Let us understand the issue by running the following program. Clearly, overflow occurs and the image moves outside − Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } ... Read More

Equal height columns can be created in a parent div on a web page. First, set the parent container as a table with the width 100%. Within that, create the columns and set the display property to table-cell. Let us see how to create equal height columns with HTML and CSS. Create a parent container Column 1 Column 1 Column 1 Column ... Read More

On a web page, we can easily create an element and position it sticky i.e., that specific element will remain stick even when the web page is scrolled. This is achieved using the position property with the value sticky. Create a div for the sticky element Set a parent div container − Sticky Element Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta ... Read More

To create a fixed footer with CSS, we will use CSS position property. A fixed footer means that the footer will remain fixed at the bottom irrespective of the page scrolling. We will be discussing two different approaches to achieve this. In this article, we are having some written content in a box and a footer. Our task is to create a fixed footer with CSS. Approaches to Create a Fixed Footer Here is a list of approaches to create a fixed footer with CSS which we will be discussing in this article with stepwise explanation and complete example codes. ... Read More