I'm having a problem with a news ticker i'm implementing within a site, and obviously didn't want to use a marquee!

Problem is in IE it scrolls fine, nice and smooth and leave the page, and starts again, in FF however when it gets to the end it reloads and there is not break in it, and its quite jumpy

This is my applet:

TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
 
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;

ticker_start();

function ticker_start() {
    var tickerSupported = false;
    TICKER_WIDTH = document.getElementById("TICKER").style.width;
    var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";

    // Firefox
    if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
        document.getElementById("TICKER").innerHTML = "<TABLE  cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
        tickerSupported = true;
    }
    // IE
    if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
        document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
        tickerSupported = true;
    }
    if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
        document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
        document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
        document.getElementById("TICKER").style.display="block";
        TICKER_tick();
    }
}

function TICKER_tick() {
    if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
    if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
    if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
    window.setTimeout("TICKER_tick()", 30);
}

This is the html code:

<DIV ID="TICKER"    STYLE="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; 

overflow:hidden; background-color:#FFFFFF; width:520px" onmouseover="TICKER_PAUSED=true" 

onmouseout="TICKER_PAUSED=false">

<span style='background-color:#9a0000;'><font color=#FFFFFF><B>News</B></font></span>
<B>news news news news news news news news news news
        

<span style='background-color:#9a0000;'><font color=#FFFFFF><B>News</B></font></span>
<B>news news news news news news news news news news 
        

<span style='background-color:#9a0000;'><font color=#FFFFFF><B>News</B></font></span>
<B>news news news news news news news news news news 
    </DIV>

    <script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

I have looked through it again and again, and I can't work it out, it probably will be something so obvious! Thanks in advance

Originally Posted by McBone

Problem is in IE it scrolls fine, nice and smooth and leave the page, and starts again, in FF however when it gets to the end it reloads and there is not break in it, and its quite jumpy

Just curious if you ever figured this one out? I'm having the same issue and I can't seem to figure out what is causing it. It clearly works fine in FF on the demo site, so I don't know why it's not working with my code...

If you found a solution I'd love to hear it.

Thanks!

eddie

Actually, I just figured it out, in case anyone else experiences this. If you have your DOCTYPE set to HTML 4.01 Strict//EN, it will exhibit this behavior. If you change it to Transitional (!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN") it will work as expected...