Q1808 Can I use a scrollbar to change a variable?

You are here: irt.org | FAQ | JavaScript | Misc | Q1808 [ previous next ]

Have you ever needed a custom scrollbar or slider that didn't just scroll a window, but returned a percentage value? Well, so did I and this fit the bill. I wrote this for Internet Explorer, but it could easily be rewritten for Netscape.

<html>
<head>
<title>Slider Demo</title>
</head>

<body onload="onload()">
<script language="JavaScript1.2">
<!--
var sliderHeight;
function showSliderPercent() {
  sliderScrollTop = document.all.slider.scrollTop;
  document.all.txt.innerHTML = Math.round(100 - ((sliderScrollTop/sliderHeight) * 100)) + " %";
	
  setTimeout("showSliderPercent()",100)
}

function onload() {
  for(counter = 0; counter <= 100; counter++)
    document.all.slider.innerHTML += " <br>";

  sliderHeight = document.all.slider.scrollHeight - document.all.slider.offsetHeight;
  document.all.slider.scrollTop = document.all.slider.scrollHeight;
  showSliderPercent()
}
//--></script>

<span id="txt"></span>
<span id="slider" style="position:absolute; overflow-x:hidden; overflow-y:scroll; width:50; left:-10; top:50; height:100;"></span>

</body>
</html>

Submitted by Joel Wyrick