Text Scroller V

Mouseover to pause, Mouseout to resume.

With most scrollers the current message has to scroll up out of viiew before the next message scrolls into view, with this scroller the next message scrolls into view before the current message scrolls out of view.

Two nested divs are scrolled together within a container div, when the bottom of a scrolling div reaches the top of the container div it is repositioned below the other scrolling div and populated with the next message in the array.

If the height of scrolling div 1 is less than the height of the container div scrolling div 2 is positioned at the bottom of the container div.
If the height of scrolling div 1 is greater than the height of the container div scrolling div 2 is repositioned at the end of the scrolling div 1.

And vice-versa

The space between each message is set using padding-bottom in the css rule #tsvdiv0, #tsvdiv1.

Additional space between messages will be created if a message is smaller than the height of the container

The individual messages are put in an array, a message can contain HTML tags for links, images,css etc.

The CSS
If applying border and/or padding remember to take into account the way IE and gecko render the box model if you want the scroller to show the same size in those browsers.

Example:

Display width 200px with 1px border plus 5px left and right padding used in the scrolling divs

Gecko
tsvcont width = 200 - (border x 2) = 198
tsvdiv0 width = 198 - ((border + padding) x 2) = 186

IE conditional statement
tsvcont width = 200
tsvdiv0 width = 200 - (border x 2) = 198 

<HTML>
<HEAD>
<TITLE>Text Scroller V</TITLE>

<script type="text/javascript">
info=[
['<b>Message One</b><br>Mouseover to pause, Mouseout to resume.'],
['<b>Message Two</b><br>With most scrollers the current message disappears up top before the next message appears from below.'],
['<b>Message Three</b><br>Notice that this message came into view before message two disappeared and the next one comes into view before this one disappears.'],
['<b>Message Four</b><br>Two nested divs are used and alternately populated with the messages in the array'],
['<b>Message Five</b><br>When the bottom of current div reaches the top of the display area it is repositioned'],
['<b>Message Six</b><br>If the next divs height is less than the height of the display area it is positioned at the botton of the display area.<br>If the next divs height is greater than the height of the display area it is positioned at the bottom of the next div']
] 
step=1
nextMessage=1

function initTSV1(){
tsvDisplay=document.getElementById("tsvcont")

for(var i=0;i<2;i++){
newDiv=document.createElement("DIV")
newDiv.setAttribute("id","tsvdiv"+i)
newDiv.onmouseover=function(){clearTimeout(timer)}
newDiv.onmouseout=function(){scrollTSV1()}
newDiv.style.position="absolute"
newDiv.style.padding="0 5 10 5" // top right bottom left
tsvDisplay.appendChild(newDiv)
}

tsvDv0=document.getElementById("tsvdiv0")
tsvDv1=document.getElementById("tsvdiv1")
tsvDv0.innerHTML=info[0]
tsvDv1.innerHTML=info[1]

tsvDv0.style.top=tsvDisplay.offsetHeight
tsvDv1.style.top=tsvDisplay.offsetHeight+tsvDv0.offsetHeight+"px"

scrollTSV1()
}

function scrollTSV1(){
tsvDv0Pos=parseInt(tsvDv0.style.top)
tsvDv1Pos=parseInt(tsvDv1.style.top)

tsvDv0Pos-=step
tsvDv1Pos-=step

tsvDv0.style.top=tsvDv0Pos+"px"
tsvDv1.style.top=tsvDv1Pos+"px"

if(tsvDv0Pos< -tsvDv0.offsetHeight){

nextMessage++
if(nextMessage==info.length){nextMessage=0}
tsvDv0.innerHTML=info[nextMessage]

if(tsvDv1.offsetHeight<tsvDisplay.offsetHeight){

if(tsvDv1.offsetTop<tsvDisplay.offsetHeight-tsvDv1.offsetHeight){
tsvDv0.style.top=tsvDisplay.offsetHeight+"px"
}
else{
tsvDv0.style.top=tsvDv1.offsetTop+tsvDv1.offsetHeight+"px"
}

}
else{
tsvDv0.style.top=tsvDv1.offsetTop+tsvDv1.offsetHeight+"px"
}

}

if(tsvDv1Pos< -tsvDv1.offsetHeight){

nextMessage++
if(nextMessage==info.length){nextMessage=0}
tsvDv1.innerHTML=info[nextMessage]

if(tsvDv0.offsetHeight<tsvDisplay.offsetHeight){

if(tsvDv0.offsetTop<tsvDisplay.offsetHeight-tsvDv0.offsetHeight){
tsvDv1.style.top=tsvDisplay.offsetHeight+"px"
}
else{
tsvDv1.style.top=tsvDv0.offsetTop+tsvDv0.offsetHeight+"px"
}

}
else{
tsvDv1.style.top= tsvDv0.offsetTop+tsvDv0.offsetHeight+"px"
}

}

timer=setTimeout("scrollTSV1()",50)

}

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

</script>

<style>

#tsvcont{
position:relative;
width:198px;          /* width = target width - (border * 2) */
height:100px;
border:1px solid #8e8462;
overflow:hidden;
text-align:left;
}

#tsvdiv0, #tsvdiv1{
position:absolute;
width:186px;          /* width = tsvcont width - ((border + padding) * 2) */
border:1px solid red;
padding:0 5 10 5
}
</style>

<!--[if IE]>

<style type="text/css">

#tsvcont{
width:200px;          /* target width */
}

#tsvdiv0, #tsvdiv1{
width:198px;          /* width = IE tsvcont width - (tsvcont border * 2) */
}

</style>

<! [endif]-->

</HEAD>
<BODY onload="initTSV1()">
<h1><span>Text Scroller V</span></h1>
<DIV id="tsvcont" style="position:relative;width:200px; height:70px; border:1px solid #8e8462; overflow:hidden; text-align:left"></DIV>
</BODY>
</HTML>