Hi al,

I've been designing for some time and got into valid xhtml and css pages a while ago. being that said, i test my pages on all browsers now and make sure they all look somewhat identical.

i used to check only with IE so the scrollbar wasn't much of an issue, ugly? just hide it. but with other browsers, i can't really do that. so i researched for a custom scrollbar script - all of them did not workin in mozilla.

so i wrote my own out of my 2 years of not-so-good-experiance with javascript. here's it:

mind the html, it's a test page only - so far.

Code:
<script type="text/javascript">
<!--

var counter;

function scrollDiv(DIR) {

   var topLine = 100;
   var botLine = 400;

   var theDiv = document.getElementById('content').style;
   var height = theDiv.height;

   var topY = theDiv.top;
   var botY = parseInt(topY) + parseInt(height);

   if(DIR == 1) {

      // go down

      if(parseInt(topY) == topLine) {
         // if the top of the DIV is equal to the top line, stop scrolling
      } else {
         theDiv.top =  parseInt(theDiv.top) + 5;
         counter = setTimeout("scrollDiv(1)", 50);
      }

   } else {

      // go up

      if(parseInt(botY) == botLine) {
         // if the bottom of the DIV is equal to the bottom line, stop scrolling
      } else {
         theDiv.top = parseInt(theDiv.top) - 5;
         counter = setTimeout("scrollDiv(2)", 50);
      }

   }

}

//-->
</script>

<body style="overflow:hidden">

<div id="topCover" style="position:absolute;z-index:4;left:0;top:0;width:100%;height:100px;background-color:#999999"></div>
<div id="botCover" style="position:absolute;z-index:4;left:0;top:400;width:100%;height:100%;background-color:#999999"></div>

<div id="buttons" style="position:absolute;z-index:5;left:650px;top:200px;width:100px;">
<a href="#" onmousedown="scrollDiv(1)" onmouseup="clearTimeout(counter); return false;">Go Up</a><br />
<a href="#" onmousedown="scrollDiv(2)" onmouseup="clearTimeout(counter); return false;">Go Down</a>
</div>

<div id="content" style="position:absolute;z-index:1;left:300px; top:100;width:300px;background-color:#efefef">
text<br />

text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />

text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />

text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />

text<br />
text<br />
text<br />
text<br />
</div>
i've uploaded it to:

http://frozenashes.net/external/pages/scroll2.html

it works nicely, but......you can hold down to "Go Down" and it'll never stop. well, unless you let go that is but it's a problem.

my current theory is to get the bottom Y position of the div by adding the height of to the top Y.

i tried:

document.getElementById('content').style.bottom

but that didn't work. anyhow, the height is not supposed to be static since content is to be dynamic from a php script so i can't have a fixed width. well, because of that, finding the height is a pain.

any help is appriciated......

thanks,

-Nay