Scroll Layer Right 3

What's New

Show and hide this layer by using any mouse event, in either links or the div tag, one containing a call to "initLyr()" and one containing a call to "hideLyr()"

In this example if the cursor is over the layer and you press the left mouse button, or click on THE LINK, this layer will then move left and reveal a method to show the layer again.
This could be an image, or another layer.

<script language=Javascript>

function initLyr(){
moveLayer=document.getElementById("MoveThis")
// if scrolling left, position the layer returns to as entered in style top
defPos=parseInt(moveLayer.style.left)
leftPos=defPos
stopPos=0 // right position layer scrolls
document.getElementById("ReShow").style.visibility="hidden"
showLyr()
}

function showLyr(){
if (leftPos<stopPos){
leftPos+=20 //scroll 5 more pixels until stopPos reached, also affects speed
moveLayer.style.left=leftPos
showme=setTimeout("showLyr()",50) //scroll down by making continuous calls to Appear.
}
else{
clearTimeout(showme)
}
}

function hideLyr(){
clearTimeout(showme)
if (leftPos>defPos) {
leftPos-=20 // scroll up 5 more pixels until leftPos reached, also affects speed
moveLayer.style.left=leftPos
hideMe=setTimeout("hideLyr()",50)
}
else{
clearTimeout(hideMe)
document.getElementById("ReShow").style.visibility="visible"
}
}

// add onload="initLyr()" to the opening BODY tag

</script>

<div id=ReShow style="position:absolute;top:150px;left:0px;visibility:hidden;width:20px" onclick="initLyr()">
R E V E A L
</div>

<div id="MoveThis" style="position:absolute;top:5px;left:-200px;width:200px;z-index:2" onclick="hideLyr()">
Your Contents
</div>