Web Development Articles - Page 513 of 1049

To create animations using JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: blue;       color:white;       border:none;       margin-bottom:10px;    }    .Animation {       width: 60px;       height: 60px;       position: absolute;       background-color: rgb(134, 25, 207);    } Animation using JS example Start Animation    function startAnimation() {       var elem = document.querySelector(".Animation");       var pos = 0;       var id = setInterval(frame, 10);       function frame() {          if (pos == 450) {             clearInterval(id);          } else {             pos++;             elem.style.borderRadius = pos/14 + 'px';             elem.style.left = pos + 'px';          }       }    } OutputThe above code will produce the following output −On clicking the “Start Animation” button −

To create and use syntax highligher, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .colorLinks {       color: rgb(131, 44, 212);       text-decoration: none;       font-size: 20px;       font-weight: bold;    }    .setColor {       margin: 20px;       padding: 10px;       border: none;       font-size: 18px;       background-color: rgb(226, 43, 89);       color: white;    } Syntax Highlighting example Go to google.com Go to facebook.com Click Here Click the above button to highlight the links    var anchrorRg = /[^

To use media queries with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       color: white;       padding: 20px;    } Using media queries with JavaScript Example Resize the screen to see the color change from blue to red    var mediaQuery = window.matchMedia("(max-width: 700px)");    function setColor(mediaQuery) {       if (mediaQuery.matches) {          document.body.style.backgroundColor = "red";       } else {          document.body.style.backgroundColor = "blue";       }    }    setColor(mediaQuery);    mediaQuery.addListener(myFunction); OutputThe above code will produce the following output on window size greater than 700px −On resizing the browser window size less than 700px −

To create a draggable HTML element with JavaScript and CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .dragDiv {       position: absolute;       z-index: 9;       text-align: center;       border: 1px solid #d3d3d3;       padding: 30px;       cursor: move;       z-index: 10;       background-color: rgb(108, 24, 177);       color: #fff;       font-size: 20px;       font-weight: 500;    } ... Read More

Media Queries are used on a web page to set the responsiveness. It allows a user to set different styles based on different screen sizes. These screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints. Different screen sizes The common device breakpoints are the different devices with its screen size i.e. Phones − Screens less than 768px wide Tablets − Screens equal to or greater than 768px wide Small laptops − Screens equal to or greater than 992px wide Laptops and Desktops ... Read More

To close list items with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    ul {       list-style-type: none;       padding: 0;       margin: 0;    }    ul li {       border: 1px solid rgb(221, 221, 221);       background-color: #5a5cec;       color: white;       padding: 12px;       text-decoration: none;       font-size: 18px; ... Read More

On any thoughts and quotes website, you must have seen the quote slideshow that includes the quote, the celeb name who gave the same quote and the slider. This slider allows moving to the left or right slideshow by clicking separate buttons like arrow keys. Let us see how to create a quotes slideshow with CSS and JavaScript. Set the parent div The div includes the container for the slideshow, the quotes, and the previous and next buttons as well. The quotes are set using the elements. The celeb name who gave the same quote is set as a ... Read More

On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. 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. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ... Read More

To create a chat message with CSS, the code is as follows −Example Live Demo    body {       margin: 0 auto;       max-width: 800px;       padding: 0 20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .message {       font-size: 18px;       font-weight:500;       border: 2px solid #dedede;       background-color: #55e4a8;       color:rgb(0, 0, 0);       border-radius: 12px;       padding: 10px;       margin: 10px 0;    }    .darker ... Read More

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function. Set the div We have set the image as a div class. Rest, the coming soon text and the timer is placed within it − COMING SOON Place the Image The image is now placed using the background-image property. The position is set using the background-position property” .bgimg { background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); height: ... Read More