Blog

How to Create a “Read More – Read Less” button with JavaScript.

How to Create a “Read More – Read Less” button with JavaScript. Step 1) Add HTML: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue […]

How to create a Scroll indicator with CSS and JavaScript

How to create a Scroll indicator with CSS and JavaScript   Step 1) Add HTML: <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div class=”content”> <h3> Please Scroll Down to See The Effect</h3> <p>This progress bar will <b>show how far a page has been scrolled</b>.</p> <p>It also <b>works when you scroll back […]

How to Create Zooming Effect on Hover Using CSS

How to Create Zooming Effect on Hover Using CSS Step 1: Adding HTML <h1>Zoom on Hover</h1> <p>Hover over the div element.</p> <div class=”zoom”></div> Step 2 : Adding CSS * { box-sizing: border-box; } .zoom { padding: 50px; background-color: blue; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { -ms-transform: scale(1.5); /* […]

How to copy text to the clipboard with JavaScript

How to copy text to the clipboard with JavaScript Step 1) Add HTML: <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p> <input type=”text” value=”Hello World” id=”myInput”> <div class=”tooltip”> <button onclick=”myFunction()” onmouseout=”outFunc()”> <span class=”tooltiptext” id=”myTooltip”>Copy to […]

How to create a Sticky Menu with CSS and JavaScript

How to create a Sticky Menu with CSS and JavaScript   Step 1) Add HTML: Create a navigation bar: <div class=”header”> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id=”navbar”> <a class=”active” href=”javascript:void(0)”>Home</a> <a href=”javascript:void(0)”>News</a> <a href=”javascript:void(0)”>Contact</a> </div> <div class=”content”> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the […]

How to Create Drop-down Menu in Navigation bar Using HTML and CSS

How to Create Drop-down Menu in Navigation bar Using HTML and CSS Step 1) Adding HTML: <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> </head> <div class=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>About</a> <div class=”dropdown”> <button class=”dropbtn”>Dropdown Menu <i class=”fa fa-caret-down”></i> </button> <div class=”dropdown-content”> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> </div> </div> <h3>Dropdown […]

How to add form validation for empty input fields with JavaScript.

How to add form validation for empty input fields with JavaScript. Step 1 : Create a Simple input field in HTML <h2>Input field validation via JavaScript</h2> <p>Press Submit button without entering any text.</p> <form name=”myForm” action= “/action_page.php” onsubmit=”return validateForm()” method=”post” required> Name: <input type=”text” name=”fname”> <input type=”submit” value=”Submit”> </form> Step 2: Add JavaScript function validateForm() […]

Scroll to top