The slider software was designed by Garry P. Spencer


sliderH1
               
sliderH2
               



  TEXT
               

sliderV1




 
sliderV2




 




 



 



 
Place the following functions in the <HEAD> section of your HTML document.


// Call the 'sliderInit' function from the <BODY> onload event handler.
// It initializes all <SPAN> objects whose width is 17px.
// This is necessary due to a quirk in MSIE on Windows XP machines.

function sliderInit() {
var s=document.getElementsByTagName("span");
for (var i=0;i<s.length;++i)
 { if (s.item(i).style.width=="17px") {s.item(i).scrollTop=0;} }
}




// Use the 'sliderH' function with horizontal sliders.
// The 'sliderH' function returns a floating-point number between 0 and 1.

function sliderH(spanObj) {
var spanObj;
return parseInt(spanObj.scrollLeft)/
      (parseInt(spanObj.scrollWidth)-parseInt(spanObj.style.width));
}




// Use the 'sliderV' function with vertical sliders.
// The 'sliderV' function returns a floating-point number between 0 and 1.

function sliderV(spanObj) {
var spanObj;
return parseInt(spanObj.scrollTop)/
      (parseInt(spanObj.scrollHeight)-parseInt(spanObj.style.height));
}

Place the following inside the <BODY> tag:


<body onload="sliderInit();">


You can place one or more horizontal sliders in the <BODY> section:


<span id=sliderH1
 style="width:110px; height:17px; overflow-y:hidden; overflow-x:scroll;
 font-family:arial; font-size:100px;"
 onscroll="window.status=sliderH(sliderH1).toString();">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>

Notes:
1. Each <span> object should have its own unique ID (for example: id=sliderH1, id=sliderH2, ...).
2. The width:110px; can be changed to any desired width.
3. The non-breakable spaces ( &nbsp; ) are used to force the scroll bars to appear.  You may have
    to experiment with the number of spaces if sliders of different widths are used.
4. The optional onscroll event handler is invoked whenever the user changes the scroll position.  It can
    be used to reference any function you choose.  If you choose to use the onscroll event handler,
    you can use the this object reference in your function call.
You can place one or more vertical sliders in the <BODY> section:


<span id=sliderV1
 style="width:17px; height:110px; overflow-x:hidden; overflow-y:scroll;
 font-family:arial; font-size:100px;"
 onscroll="window.status=sliderV(sliderV1).toString();">
<br><br><br><br>&nbsp;
</span>

Notes:
1. Each <span> object should have its own unique ID (for example: id=sliderV1, id=sliderV2, ...).
2. The height:110px; can be changed to any desired height.
3. The line-breaks ( <br> ) are used to force the scroll bars to appear.  You may have to experiment
    with the number of line-breaks if sliders of different heights are used.
4. The optional onscroll event handler is invoked whenever the user changes the scroll position.  It can
    be used to reference any function you choose.  If you choose to use the onscroll event handler,
    you can use the this object reference in your function call.