Text Scroller H

Two span elements are nested in a container div, each span element is populated with the same text,

To allow the spans to scroll each span element uses position relative and are scrolled together, when the first span elements right edge reaches the left edge of the container div it is repositioned to follow the second span element, when the second span elements right edge reaches the left edge of the container div it is repositioned to follow the first span element giving a continuous scrolling effect.

NOTE:
Whereas IE7, Mozilla, Firefox, and NS8 were quite happy working with each span containing 4950 characters Opera decided it was not going to play ball

2185 characters makes the width of each span 16382px giving the scrolling elements a total width 32764px - Opera appears to be happy with this number, above this Opera has tantrums, and struggles to gets its sums correct. eg; 4950 characters Opera stopped after 2244 characters - eg; 2244 characters Opera may or may not run, or does not display from the second run correctly depending what mood its in.

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

<script type="text/javascript">

str1="Hello and welcome This continuous scrolling text effect is created by nesting 2 spans within a container div "
+"Opera was the problem browser with this one regarding how much text can be used in this effect but 2100 characters should be enough for most purposes "


step=2
hs3Timer=null

function initTSH(){
scrollBox=document.getElementById("scrollbox")
scroll1=document.getElementById("scroller1")
scroll2=document.getElementById("scroller2")

scroll1.innerHTML=str1
scroll1.innerHTML+=" | < > | "

scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= 0
scroll2.style.top= 0

scroll1.onmouseover=function(){clearTimeout(hs3Timer)}
scroll1.onmouseout=function(){scrollTSH()}
scroll2.onmouseover=function(){clearTimeout(hs3Timer)}
scroll2.onmouseout=function(){scrollTSH()}

setTimeout("scrollTSH()",2000)
}


function scrollTSH(){
clearTimeout(hs3Timer)

scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)

scroll1Pos-=step
scroll2Pos-=step

scroll1.style.left=scroll1Pos+"px"
scroll2.style.left= scroll2Pos+"px"

if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}


if(scroll2Pos< -scroll1.offsetWidth*2){
scroll2.style.left=0
}

hs3Timer=setTimeout("scrollTSH()",50)

}

</script>

</HEAD>
<BODY onload="initTSH()">
<h1><span>Text Scroller H</span></h1>

<center>

</center>

</BODY>
</HTML>