JAVASCRIPT EXAMPLES: Left Scrolling Layers

COPY - Insert Inside Body: <BODY></BODY>

function Init(layernum){
if(scrolling==1){return} // prevent 2 layers scrolling
if(previous==layernum){return} 
else{
scrollLeft(layernum)
Sim_Return() // simultaneous scrollback
}
}

function scrollLeft(layernum){
scrolling=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow<stoppos+30){
posnow-=2;}
else{
if(stoppos<posnow){
posnow-=5;}
}
document.getElementById(layernum).style.left=posnow //new left position

L_Timer=setTimeout("scrollLeft('"+layernum+"')",50);

if(posnow<=stoppos){
posnow==stoppos
scrolling=0
clearTimeout(L_Timer);
previous=layernum //
}
}

startpos2=startpos
posnow2=stoppos
function Sim_Return(){
scrolling=1
if(Last==0){
scrolling=0
return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow2>=startpos2-30){
posnow2+=3}
else{
posnow2+=5;}
document.getElementById(Last).style.left=posnow2 // current right position
R_Timer=setTimeout("Sim_Return('"+Last+"')",50);

if(posnow2>=startpos2){
scrolling=0
clearTimeout(R_Timer);
document.getElementById(Last).style.left=startpos2 // prevent overshoot and ensure return to original position
posnow2=stoppos
}
}

// -->
</script> 
<a href="javascript:Init('yourID_One')">Scroll Layer 1</a>
<a href="javascript:Init('yourID_Two')">Scroll Layer 2</a>
<a href="javascript:Init('yourID_Three')">Scroll Layer 3</a>
<a href="javascript:Init('yourID_Four')">Scroll Layer 4</a> 
<DIV style="position:absolute;left:100px; top:100;width:200;height:400; border:0 solid black;clip:rect(0,100,400,0)"> 
<div id="yourID_One" style="position:absolute; left:0; top:0;z-index:2;width:100">Layer 1 Contents</div> 
<div id="yourID_Two" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">Layer 2 Contents</div> 
<div id="yourID_Three" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">Layer 3 Contents</div> 
<div id="yourID_Four" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">Layer 4 Contents</div> 
</DIV>