how can this layer scroller move????

[andrew1234]

Hi
sorry here is the attached file


I can do action script (flash)

but my java script is rusty.

in the attached file there is a html page
that has a scroller on it in a layer.

•how i make the scroller move on mouse over
and stop on mouse off
•and how do i make it just move on its own
[in flash i could go this._y+=5 ( to make it move up continuously)]


your help would be greatly appretiated

andrew

[Mr J]

Have a play with the following


<script language="JavaScript">
<!--
var Last=""
var current=0

function swaplayer(thislayer){
clearTimeout(timer)
document.body.style.visibility="visible" // keeps body objects visible
document.all[thislayer].style.pixelTop=0 // set layer to top of container
Last=current
if(thislayer==Last){document.all[Last].style.visibility="visible";return} // keep visible and reset to top
document.all[thislayer].style.visibility="visible"
document.all[Last].style.visibility="hidden"
current=thislayer
//scroll() // start scrolling when new layer selected
}

setTimeout("swaplayer('odiv1')",1000) // show initial layer

timer=""
speed=50
scroll_rate=1
function scroll(){step=-scroll_rate;motion()}
function motion(){
clearTimeout(timer)
posnow=document.all[current].style.pixelTop
if(document.all[current].style.pixelTop<-document.all[current].scrollHeight){
document.all[current].style.pixelTop=cont.offsetHeight-20
motion()
}
else{
posnow+=step
document.all[current].style.pixelTop=posnow
timer=setTimeout("motion()",speed)
}
}

function cease(){
clearTimeout(timer)
}

// -->
</script>

<a href="javascript:swaplayer('odiv1')">Layer 1</a> <a href="javascript:swaplayer('odiv2')">Layer 2</a> <a href="javascript:swaplayer('odiv3')">Layer 3</a> <a href="javascript:swaplayer('odiv4')">Layer 4</a> <a href="javascript:swaplayer('odiv5')">Layer 5</a> <a href="#null">[ Scroll ]</a>

<DIV id=cont style="position:absolute; left:300; top:120;width:300; height:200; CLIP:rect(0px 300px 200px 0px);border:2 solid blue" onmouseover="javascript:scroll()" onmouseout="cease()">

<div id="odiv1" style="position:absolute; left:0; top:0; width:300; height:200; visibility:visible;font-size:30"> LAYER 1 CONTENTS
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>
</div>

<div id="odiv2" style="position:absolute; left:0; top:0;width:300; height:200; background-color: #AAAA00; color:black;visibility:hidden"> LAYER 2 CONTENTS </div>

<div id="odiv3" style="position:absolute; left:0; top:0;width:300; height:200; background-color: #FF0000; color:black;visibility:hidden"> LAYER 3 CONTENTS </div>

<div id="odiv4" style="position:absolute; left:0; top:0;width:300; height:200; color:black;visibility:hidden;FLOAT:right"> LAYER 4 CONTENTS </div>

<div id="odiv5" style="position:absolute; left:0; top:0;width:300; height:200; background-color: gold; color:black;visibility:hidden;text-align:left"> LAYER 5 CONTENTS </div>

</DIV>