Scroll Right

Please Select Layer 1

Layer 1 Layer 2 Layer 3 Layer 4 Layer 5

This example is set in a window without scrollbars to show how positioning the layers off-page can further enhance the effect.

Please select layer 2 and watch layer 1.

You may maximise this window to see the layers in situ

I have also made these layers slightly transparent so you can see the layer behind.

The layers are scrollLayerially positioned to the right out of view.

When a layer is called it scrolls to the left stop position stated in the script.

The previously called layer then scroll right, back to the start position.

Please select layer 3.

Links to call the layers can be on the parent page or in the layers themselves.

Notice also that the active layer is always on top of the previous layer.

The layers don't necessarily have to scroll back they can be return direct.

See comments in the script

The contents of the layers can be anything that you would normally include in an HTML document, this could be an image or text effects. Text Effect

This was brought to you by apachejeff.

apachejeff@huntingground.freeserve.co.uk

Site Address Huntingground.net

Thank you. 



















<HTML>
<HEAD>
<TITLE>Scroll Layer Right</TITLE>

<script type="text/javascript">

var startPos=0 //
var stopPos=350 // left stop position
var tim=""
var Last=""
var previous=0
var scrolling=0

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

function scrollRight(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("scrollRight('"+layernum+"')",50);

if(posNow>=stopPos){
posNow==stopPos
scrolling=0
clearTimeout(tim)
scrollLeft()
previous=layernum //
}
}

var t2=""
function scrollLeft(){
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("scrollLeft('"+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
scrollLeft()
}

</script>

</HEAD>
<BODY>

<P><a href="#null" onclick="scrollLayer('One')">Layer 1</a> <a href="#null" onclick="scrollLayer('Two')">Layer 2</a> 
<a href="#null" onclick="scrollLayer('Three')">Layer 3</a> <a href="#null" onclick="scrollLayer('Four')">Layer 4</a> 
<a href="#null" onclick="scrollLayer('Five')">Layer 5</a>

<h1 id="title" style="visibility:visible">Please Select Layer1.</h1>
<div id="One" style="position:absolute; left:0px; top:140px; width:400px; height:300px; background-color: #00AA00; border:4px inset #000000; color:white;padding-left:15px"> 
<P>Please select layer 2 and watch layer 1.
<P>I have made these layers slightly transparent so you can see the layer behind.

</div>
<div id="Two" style="position:absolute; left:0px; top:160px; width:400px; height:280px; background-color: #AAAA00; border:4px inset #000000; color:white;padding-left:15px"> 
<P>The layers are scrollLayerially positioned to the right out of view.
<P>When a layer is called it scrolls to the left <i>stop position</i> stated in the script.
<P>The previously called layer then scroll right, back to the <i>start position</i>.
<P>Please select layer 3.

</div>
<div id="Three" style="position:absolute; left:0px; top:180px; width:400px; height:260px; background-color: #AA0000; border:4px inset #000000; color:white;padding-left:15px"> 
<P>Links to call the layers can be on the parent page or in the layers themselves.
<P>Notice also that the active layer is always on top of the previous layer.
<P>The layers don't necessarily have to scroll back they can be return direct.
<P>See comments in the script

</div>
<div id="Four" style="position:absolute; left:0px; top:200px; width:400px; height:240px; background-color: #0000AA; border:4px inset #000000; color:white;padding-left:15px;FLOAT:right"> 
<P><img src="fantast.jpg" width=200 height=150 align=left>
The contents of the layers can be anything that you would normally include in an HTML document.
<marquee style="font-size:40x; color:#AA0000">Text Effect</marquee>

</div>
<div id="Five" style="position:absolute; left:0px; top:220px; width:400px; height:220px; background-color: #55AAAA;border:4px inset #000000; color:white;padding-left:15px"> 
<P>This was brought to you by apachejeff.<br>
<P>Site Address <a href="www.huntingground.freeserve.co.uk" target="new">Huntingground.net</a>
<P>Thank you.

</div>

</BODY>
</HTML>