Link to home
Start Free TrialLog in
Avatar of jondanger
jondanger

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of frindo
frindo
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial