<HTML>
<HEAD>
<TITLE>Javascript Slider Control - Example</TITLE>
<SCRIPT>
var wsl_sliding;
var wsl_divisor = new Array(); // FSDs
var wsl_voffset = 27; // these two values suitable for firefox
var wsl_hoffset = 0;
if ( document.all ) { // and these for ie
wsl_voffset = 17;
wsl_hoffset = 17;
}
function wsl_slide () {
if( wsl_sliding.id ) {
document.getElementById(
wsl_sliding.getAttribute( 'wsl_related' )
).value = wsl_sliding.scrollLeft / wsl_divisor[wsl_sliding.id];
window.setTimeout( "wsl_slide()", 20 )
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="slider01" class="wsl_slider" wsl_related = "pos" style="width:400px;"></DIV>
<br>
<input type="text" id="pos" value="0.25">
<br><div id="smaller" class="wsl_slider" wsl_related="out" style="width:150px;"></DIV>
<br><input id="out">
<SCRIPT>
var myDivs = document.getElementsByTagName( 'div' );
for( var i=0; i<myDivs.length; i++ ) {
var d = myDivs[i];
if ( d.className == 'wsl_slider' ) {
d.style.overflow = 'hidden';
d.style.height = wsl_voffset;
var theSlider = document.createElement('div');
theSlider.id = 'wsl_' + d.id;
theSlider.onmousedown = function() { wsl_sliding = this; wsl_slide(); };
theSlider.onmouseup = function() { wsl_sliding = 0; };
theSlider.style.overflow = 'scroll';
theSlider.style.height = wsl_voffset;
var sliderWidth = parseInt(d.style.width) + wsl_hoffset;
theSlider.style.width = sliderWidth;
wsl_divisor[theSlider.id] = 6 * parseInt(d.style.width);
var relatedInput = d.getAttribute( 'wsl_related' );
theSlider.setAttribute( 'wsl_related', relatedInput );
// The following code might set the initial position if a browser supported writing
// the scrollLeft property
//var sliderPos = 0;
//if ( document.getElementById(relatedInput).value ) {
// var relatedValue = parseFloat(document.getElementById(relatedInput).value);
// sliderPos = relatedValue * wsl_divisor[theSlider.id];
//}
//if ( sliderPos < 0 ) sliderPos = 0;
//if ( sliderPos > wsl_divisor[theSlider.id] ) sliderPos = wsl_divisor[theSlider.id]; // FSD
//theSlider.setAttribute( 'scrollLeft', sliderPos );
var theInside = document.createElement('div');
theInside.style.width = parseInt(d.style.width) * 7;
theSlider.appendChild( theInside );
d.appendChild( theSlider );
}
}
</SCRIPT>
</BODY></HTML>
