Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

🧑‍🏭Create A Scroll Indicator📜

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • difference between clientHeight & innerHeight in JS
  • you have to know document & documentElement
  • offSetHeight in JS
  • position property in CSS

Click the below link and go to scroll indicator page

HTML


<div class="row">
    <div class="header">
        <h1>My Header</h1>
    </div>

    <div class="scrollout">
        <div class="scrollin">

        </div>
    </div>

</div>


<p id="demo">Scroll this page & look at the top of this page <br>Visualize how above red line is worked.</p>

JavaScript


window.onscroll=function(){



    let windH=window.innerHeight;
    let windW=window.innerWidth;



    let cliH=document.documentElement.clientHeight;
    let cliW=document.documentElement.clientWidth;


    let offH=document.documentElement.offsetHeight;

    let sctop=document.documentElement.scrollTop;


    let calculatescroll=(sctop*100)/(offH-cliH);


    document.querySelector(".scrollin").style.width=calculatescroll+"%";


    let cl=`ClientHeight: ${cliH}, ClientWidth: ${cliW}`;

    document.getElementById("demo").innerHTML=`windowHeight: ${windH}, windowWidht: ${windW} 
 ${cl} 
 offsetHeight: ${offH}, ScrollTop: ${sctop}`;

}

CSS


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    padding-bottom: 2000px;
}
.row{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.header {
    background-color: #04aa6a;
    padding: 3px;
    color: white;
    text-align: center;
}

.scrollout {
    position: relative;
    width: 100%;
    background-color: #333;
    height: 12px;
}

.scrollin {
    width: 0%;
    height: 3px;
    background-color: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#demo{
    position: fixed;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    font-size:17px;
    transform:translate(-50%,-50%);
}

new Date()

  • Returns a Date object with the current date and time based on the system's clock.
  • This create a date object represent the current date and time.

toString()

  • The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

  • It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
    Example: str.padStart(len,char or string);

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC