• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6050
  • Last Modified:

javascript dhtml onscroll scrollTop

Hi, i've got the following code:

//////////////////////////////////////////////
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--


function f_filterResults(n_win, n_docel, n_body) {
      var n_result = n_win ? n_win : 0;
      if (n_docel && (!n_result || (n_result > n_docel)))
            n_result = n_docel;
      return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}





function f_clientHeight() {
      return f_filterResults (
            window.innerHeight ? window.innerHeight : 0,
            document.documentElement ? document.documentElement.clientHeight : 0,
            document.body ? document.body.clientHeight : 0
      );
}      
      

function f_clientWidth() {
      return f_filterResults (
            window.innerWidth ? window.innerWidth : 0,
            document.documentElement ? document.documentElement.clientWidth : 0,
            document.body ? document.body.clientWidth : 0
      );
}


function SetDivWidth(){
      var mydiv = document.getElementById("maincontainer");

      var curr_width = mydiv.style.width;
// now add 10 to the width
      mydiv.style.width = f_clientWidth() -16;

        var myimginscroller = document.getElementById("imgscroller");

        myimginscroller.height = (f_clientHeight() * 4);
      
}


function zztt(){
document.getElementById("maincontainer").innerHTML = document.getElementById("scroller").scrollTop
}


-->
</script>
</head>


<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onload="SetDivWidth()" onresize="SetDivWidth()">
<div id="scroller" onscroll="zztt();" style="padding: 0px; background-color: rgb(41, 41, 41); color: white; position: absolute; right: 0px; top: 0px; width: 16px; height: 100%; overflow-y: scroll;">
<img id="imgscroller" src="a.bmp" height="10" width=10">
</div>

<div id="maincontainer" style="padding: 0px; position: absolute; right: 16px; top: 0px; background-color: orange; width: 100%; height: 100%;">
</div>
</body>
</html>
///////////////////////////////////////////////////////////

how can i make the updated value in the orange div (maincontainer) a percentage? (ie 0% if the scrollbar's at the top, and 100% if it's at the bottom).
My codes not working on the body height, it's working on the window height which i assume are different, i've been playing for the last couple of hours but am sure someone out there could solve this in 60 seconds!

any help much appreciated,
Jon
0
jondanger
Asked:
jondanger
1 Solution
 
frindoCommented:
I modified the zztt function and used the scrollHeight offset by the offsetHeight to determine a percentage of the whole.

Here is the new function:

function zztt(){
document.getElementById("maincontainer").innerHTML = (parseInt(document.getElementById("scroller").scrollTop)+parseInt(document.getElementById("scroller").clientHeight))/parseInt(document.getElementById("scroller").scrollHeight)*100+"%";
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now