JAVASCRIPT EXAMPLES: Scroll Layer

COPY - Insert Between Head Tags: <HEAD></HEAD>

data=new Array()

data[0]="1<br>The display fades in when scrolling into view and fades out when leaving the display area<br>IE only"
data[1]="2<br>Text and images can be included in the scrolled display <br><br><img src='pic01.jpg' width=50 height=50><br><br>CSS can also be used to enhance the display contents"
data[2]="3<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>Donec feugiat.<br>Nullam sit amet pede ut nisl iaculis luctus.<br>Suspendisse potenti.<br>Mauris sed arcu.<br>Mauris tempor.<br>Proin id neque.<br>Quisque risus.<br>Nam wisi diam."
data[3]="4<br>In ut nibh.<br>Vestibulum rhoncus.<br>Mauris ultricies elit ac nulla.<br>In sed urna ut enim luctus lacinia.<br>Duis quis turpis.<br>Curabitur sit amet ipsum.<br>Vestibulum adipiscing libero id tellus.<br>Nullam adipiscing, augue et bibendum posuere, ligula felis congue leo, vel luctus magna velit ut wisi."
data[4]="5<br><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<li>Sed non dolor vitae lectus rhoncus eleifend.<li>Vivamus ut lectus sed eros porta fringilla.<li>Vestibulum ac lorem a mi sollicitudin blandit.<li>Nullam ac lorem at wisi egestas mollis."

speed=5 // speed of scroll
pause=2000 // default pause
pause_steps=2000 // user pause increments
dir=0 // 0 = left, 1 = right
auto_reverse=0 // 0 = no, 1 = yes
spacer=1 // space between displays

ani_left=""
ani_right=""
next_left=""
next_right=""
rev=""
running=0
div_num=1

IE=document.all

function init(){ //42
el_cont=document.getElementById("cont_div")
el_one=document.getElementById("div_one")
el_two=document.getElementById("div_two")

el_one.style.height=el_cont.offsetHeight
el_two.style.height=el_cont.offsetHeight
document.getElementById("pause_time").innerHTML=pause/1000
ani_speed=50
fade_step=100/(parseInt(el_cont.style.width)/speed)

if(dir==0){
data_num=0
el_one.innerHTML=data[data_num]
init_to_left()} // start on load
else{
data_num=data.length-1
el_one.innerHTML=data[data_num]
init_to_right()}

}

function init_to_left(){
if(running==1){return}
running=1

if(dir==1){
data_num+=1
if(div_num==1){el_one.innerHTML=data[data_num]}
if(div_num==2){el_two.innerHTML=data[data_num]}

}

if(data_num>=data.length){data_num=0}

dir=0
move_left()
}

function move_left(){
enable_change=1 // button
clearTimeout(ani_left)

if(div_num==1){el_pos=parseInt(el_one.style.left)}
else{el_pos=parseInt(el_two.style.left)}

el_pos-=speed
ani_left=setTimeout("move_left()",ani_speed)

if(div_num==1){
el_one.style.left=el_pos
el_two.style.left=el_pos-el_cont.offsetWidth-spacer
if(IE){
el_one.filters.alpha.Opacity+=fade_step
el_two.filters.alpha.Opacity-=fade_step}

if(el_pos<0){
enable_change=0
el_one.style.left=0
el_two.style.left=el_cont.offsetWidth+spacer

if(IE){
el_one.filters.alpha.Opacity=100
el_two.filters.alpha.Opacity=0}

data_num++
if(data_num>=data.length){

if(auto_reverse==1&&running==1){
running=0
rev=setTimeout("init_to_right()",500)}
else{data_num=0}

}

el_two.innerHTML=data[data_num]
clearTimeout(ani_left)

if(running==1){next_left=setTimeout("move_left()",pause)}

div_num=2
}

}
else{ // if div_num = 2

el_two.style.left=el_pos
el_one.style.left=el_pos-el_cont.offsetWidth-spacer

if(IE){
el_one.filters.alpha.Opacity-=fade_step
el_two.filters.alpha.Opacity+=fade_step}

if(el_pos<0){
enable_change=0
el_two.style.left=0
el_two.style.zIndex=""
el_one.style.left=el_cont.offsetWidth+spacer

if(IE){
el_two.filters.alpha.Opacity=100
el_one.filters.alpha.Opacity=0}

data_num++

if(data_num>=data.length){

if(auto_reverse==1&&running==1){
running=0
rev=setTimeout("init_to_right()",500)}
else{data_num=0}

}
el_one.innerHTML=data[data_num]
clearTimeout(ani_left)
if(running==1){
next_left=setTimeout("move_left()",pause)}

div_num=1
}

}

function init_to_right(){
if(running==1){return}
running=1

if(dir==0){
data_num-=1
/* if moving left and stopped on last image then right dir chosen, data_num has passed data.length and is reset to 0 
additional step back is require to show correct data */
if(data_num== -2){data_num=data.length-2} // additional step back
if(data_num<0){data_num=data.length-1}
if(div_num==1){el_one.innerHTML=data[data_num]}
if(div_num==2){el_two.innerHTML=data[data_num]}

}

dir=1
move_right()
}

function move_right(){
enable_change=1
clearTimeout(ani_right)
if(div_num==1){el_pos=parseInt(el_one.style.left)}
else{el_pos=parseInt(el_two.style.left)}

el_pos+=speed
ani_right=setTimeout("move_right()",ani_speed)

if(div_num==1){
el_one.style.left=el_pos
el_two.style.left=el_pos+el_cont.offsetWidth

if(IE){
el_one.filters.alpha.Opacity+=fade_step
el_two.filters.alpha.Opacity-=fade_step}

if(el_pos>0){
enable_change=0
el_one.style.left=0
el_one.style.zIndex=""
el_two.style.left= -el_cont.offsetWidth

if(IE){
el_one.filters.alpha.Opacity=100
el_two.filters.alpha.Opacity=0}

data_num--
if(data_num<0){

if(auto_reverse==1&&running==1){
running=0
rev=setTimeout("init_to_left()",500)
}
else{data_num=data.length-1}

}
el_two.innerHTML=data[data_num]
clearTimeout(ani_right)
if(running==1){next_right=setTimeout("move_right()",pause)}

div_num=2
}

}
else{
el_two.style.left=el_pos
el_one.style.left=el_pos+el_cont.offsetWidth
if(IE){
el_one.filters.alpha.Opacity-=fade_step
el_two.filters.alpha.Opacity+=fade_step}

if(el_pos>0){
enable_change=0
el_two.style.left=0
el_two.style.zIndex=""
el_one.style.left= -el_cont.offsetWidth

if(IE){
el_two.filters.alpha.Opacity=100
el_one.filters.alpha.Opacity=0}

data_num--
if(data_num<0){
if(auto_reverse==1&&running==1){
running=0
rev=setTimeout("init_to_left()",500)
}
else{data_num=data.length-1}

}
el_one.innerHTML=data[data_num]
clearTimeout(ani_right)
if(running==1){next_right=setTimeout("move_right()",pause)}

div_num=1
}

}

function pause_up(){
pause+=pause_steps
document.getElementById("pause_time").innerHTML=pause/1000
//clearTimeout(rev)
//clearTimeout(next_right)
//clearTimeout(next_left)
//if(dir==0){
//move_left()
//}
//else{
//move_right()
//}
}

function pause_down(){
pause-=pause_steps
if(pause<2000){pause=2000}
document.getElementById("pause_time").innerHTML=pause/1000
//clearTimeout(rev)
//clearTimeout(next_right)
//clearTimeout(next_left)
//if(dir==0){
//move_left()
//}
//else{
//move_right()
//}

}

function stopme(){
running=0
clearTimeout(rev)
clearTimeout(next_right)
clearTimeout(next_left)
}

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

// -->
</script>

COPY - Insert Inside Body: <BODY></BODY>

<form name="txt_scroller" style="position:relative; left:0px; top:215px">
<span style="color:#8e8462;font-size:12px">Pause <span id="pause_time"> </span> seconds</span>

</DIV>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

Scrolling Layer