Scroll Layer Left

See also Scroll Layer Right

Scrolling Layers - Alternate

The layer called scrolls to the left stop position. When the next layer is called the previous layer is returned to the start position.
All the layers left style attribute values must be the same value as startpos as this is the position that the layers are returned to.
Reselecting a layer will return that layer back to the start position, or you can use an event to call the reset function clr(). <a href="#null" onclick="clr()">Reset</a>.
All events are rendered inactive whilst a function is running.

Layer 1 Layer 2 Layer 3 Layer 4 Layer 5






See also window Example 

<script type="text/javascript">

var startpos=500 //
var stoppos=50 // left stop position
var tim=""
var Last=""
var previous=0
var scrolling=0

function Init(layernum){
if(scrolling==1){return} // prevent 2 layers scrolling
if(previous==layernum){clr()} // reset function
else{
scrollLeft(layernum)
}
}

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-=20}
}

document.getElementById(layernum).style.left=posnow //new left position
if(posnow<(startpos-stoppos)/2){
document.getElementById(layernum).style.zIndex="1" // make active layer top
}
tim=setTimeout("scrollLeft('"+layernum+"')",50)

if(posnow<=stoppos){
posnow==stoppos
scrolling=0
clearTimeout(tim)
scrollRight()
previous=layernum //
}
}

var t2=""
function scrollRight(){
scrolling=1
if(Last==0){
scrolling=0
return}
if(document.getElementById(Last).style.left==startpos){return}
document.getElementById(Last).style.zIndex="" // make previous layer bottom, added for reset function
if(posnow>=startpos-30){
posnow+=2}
else{
posnow+=20}
document.getElementById(Last).style.left=posnow // current right position
t2=setTimeout("scrollRight('"+Last+"')",50)

if(posnow>=startpos){
scrolling=0
clearTimeout(t2)
document.getElementById(Last).style.left=startpos // prevent overshoot and ensure return to original position
posnow=stoppos
}
}

function clr(){ // reset
if(scrolling==1){return}
Last=previous
posnow=stoppos
scrolling=0
previous=0
scrollRight()
}

</script>

<DIV id="yourID_One" style="position:absolute; left:500; top:100;">Layer 1 Contents</DIV>
<DIV id="yourID_Two" style="position:absolute; left:500; top:130;">Layer 2 Contents</DIV>
<DIV id="yourID_Three" style="position:absolute; left:500; top:160;">Layer 3 Contents</DIV>
<DIV id="yourID_Four" style="position:absolute; left:500; top:190;">Layer 4 Contents</DIV>
<DIV id="yourID_Five" style="position:absolute; left:500; top:220;">Layer 5 Contents</DIV>

<a href="javascript:Init('yourID_One')">Layer 1</a>
<a href="javascript:Init('yourID_Two')">Layer 2</a>
<a href="javascript:Init('yourID_Three')">Layer 3</a>
<a href="javascript:Init('yourID_Four')">Layer 4</a>
<a href="javascript:Init('yourID_Five')">Layer 5</a>

The following script includes all the necessary data to perform any one of the following scripted effects by stating the ReturnType.

  1. Directly - the previous layer returns without any animation
  2. Scrolled - the previous layer returns only when the current layer reaches the stop position
  3. Simultaneously - the previous layer returns as the current layer scrolls to the stop position 

<script type="text/javascript">

var ReturnType=0 // 0=direct 1=alternative 2=simultaneous
var startpos=500 //
var stoppos=50 // left stop position
var Last=""
var previous=0
var scrolling=0
var L_Timer=""

function Init(layernum){
if(scrolling==1){return} // prevent 2 layers scrolling
if(previous==layernum){clr()} 
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-=20}
}
document.getElementById(layernum).style.left=posnow //new left position
if(posnow<(startpos-stoppos)/2){
document.getElementById(layernum).style.zIndex="1" // make active layer top

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

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

ChkNum=0
function chkType(){
ChkNum++
if(ReturnType==0&&Last!=""){
document.getElementById(Last).style.left=startpos // 1st chkType()
}
if(ReturnType==1&&ChkNum==2){
Alt_Return() //2nd chkType()
ChkNum=0
}
}

var R_Timer=""
function Alt_Return(){
scrolling=1
if(Last==0){
scrolling=0
return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow>=startpos-50){
posnow+=2}
else{
posnow+=20}
document.getElementById(Last).style.left=posnow // current right position
R_Timer=setTimeout("Alt_Return('"+Last+"')",50);

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

startpos2=startpos
posnow2=stoppos
function Sim_Return(){
scrolling=1
if(Last==0){
scrolling=0
return}
if(ReturnType==0||ReturnType==1){return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow2>=startpos2-50){
posnow2+=2}
else{
posnow2+=20}
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
}
}

function clr(){ // reset
if(scrolling==1){return}
Last=previous
posnow=stoppos
scrolling=0
previous=0
document.getElementById(Last).style.left=startpos
document.getElementById(Last).style.zIndex=""
scrolling=0
}
//setTimeout("init()",200) // initialise start position

</script> 

<DIV id="yourID_One" style="position:absolute; left:500; top:100;">Layer 1 Contents</DIV>
<DIV id="yourID_Two" style="position:absolute; left:500; top:130;">Layer 2 Contents</DIV>
<DIV id="yourID_Three" style="position:absolute; left:500; top:160;">Layer 3 Contents</DIV>
<DIV id="yourID_Four" style="position:absolute; left:500; top:190;">Layer 4 Contents</DIV>
<DIV id="yourID_Five" style="position:absolute; left:500; top:220;">Layer 5 Contents</DIV>

<a href="javascript:Init('yourID_One')">Layer 1</a>
<a href="javascript:Init('yourID_Two')">Layer 2</a>
<a href="javascript:Init('yourID_Three')">Layer 3</a>
<a href="javascript:Init('yourID_Four')">Layer 4</a>
<a href="javascript:Init('yourID_Five')">Layer 5</a>

Any number of layers may be used but each layer must have its own unique ID