<script type="text/javascript">
text=new Array()
text[text.length]="<span style='color:red'>This method uses an array to contain messages</span>"
text[text.length]="That scroll in sequence and pause"
text[text.length]="<span style='color:blue'>The text fades in as it scrolls up</span>"
text[text.length]="You can included many entries and use standard HTML or CSS attributes."
text[text.length]="Links are a popular use for a scroller of this type."
text[text.length]="For information on the clip attribute see <a href='clip.htm'><b>Clip</b></a>"
timer=""
speed=50
pause=4000
step= -2
message=0
check=0 // scroll after pause checker
moz=document.getElementById&&!document.all
function init(){
display_elm=document.getElementById("odiv1")
cont_elm=document.getElementById("cont")
pos=parseInt(display_elm.style.top)-(parseInt(display_elm.style.fontSize)/2 )// original top
if(!moz){
document.getElementById("cont").style.clip="rect(0 300 50 0)" //ie size
}
else{
document.getElementById("cont").style.clip="rect(0 302 52px 0)" // + border and padding for ns
}
motion()
}
motion()
}
function motion(){
clearTimeout(timer)
posnow=parseInt(display_elm.style.top)
if(message>=text.length){message=0}
// stop position, < half container height
if(check==1&&posnow<parseInt((cont_elm.offsetHeight/2)-parseInt(display_elm.style.fontSize)/2)){
clearTimeout(timer);
check=0
timer=setTimeout("motion()",pause)
//alert(100/((display_elm.offsetHeight/4)/ -step) )
return}
// fade out
if(!ns){
if(check==0&&posnow<parseInt((cont_elm.offsetHeight/2)-parseInt(display_elm.style.fontSize)/2)){
display_elm.filters.alpha.Opacity-= 100/((cont_elm.offsetHeight/4)/ -step)
}
}
// next message
if(posnow<-display_elm.scrollHeight){
display_elm.style.top=cont_elm.offsetHeight
display_elm.innerHTML=text[message]
if(!moz){
display_elm.filters.alpha.Opacity=0 // reset fade
}
check=1
message++
setTimeout("motion()",speed)
}
else{ // scroll
posnow+=step
display_elm.style.top=posnow
if(!moz){
display_elm.filters.alpha.Opacity+= 100/((cont_elm.offsetHeight/2)/ -step) // fade in
}
timer=setTimeout("motion()",speed)
}
}
setTimeout("init()",1000)
</script>
<DIV id=cont style="position:absolute;left:300px;top:140px;width:300px;height:50px;clip:rect(0px 300px 50px 0px);border:1px solid blue">
<div id="odiv1" style="position:absolute;left:0px;top:15px;width:300px;height:200px;filter:alpha(Opacity=100)">
Scroll 'n' Pause
</div>
</DIV>