JS Browsers Problem

Discussion in 'JavaScript' started by gasper000, Mar 14, 2009.

0
  1. #1
    I am trying to use a news ticker using JS. It works fine & smoothly using IE but when I try to use it with any other browser, it doesn't work.

    Firefox - Chrome - Safari: The Whole news line appears at once across the screen & it's not moving.

    Opera: Nothing Appears.

    JS file
    
 


TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
 
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:cascade-light; font-size:18px; color:#ffe991";
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);
}
    Code (markup):
    HTML
    
  <div style="
position: absolute; left: 253px; top: 152px;
z-index:9" ID="TICKER" STYLE="overflow:hidden; width:685px"  
onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
some text some text some text some text some text somesome text some text some text textsome text some text some text </div>
<script type="text/javascript" 
src="webticker_lib.js" language="javascript"></script>
    Code (markup):
    Do you have any ideas how can I solve this problem ?
     
    gasper000, Mar 14, 2009 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    I don't really know javascript, so I'm not gonna go into what might be wrong, cause I have no idea.

    However - if you want something that just works, I recommend using a premade js-lib, as mootools or jQuery.

    They have built-in functionality for doing exactly what you want, and much, much more.
    Look, for instance, at this tutorial: http://woork.blogspot.com/2008/07/news-ticker-with-horizontal-scroller.html
     
    PoPSiCLe, Mar 14, 2009 IP
    gasper000 likes this.
  3. gasper000

    gasper000 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you. I have solved the problem but I don't understand the solution. I had to remove 
    <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Code (markup):
    from my file & it worked when I did so. Do you know why ?!
     
    gasper000, Mar 14, 2009 IP
  4. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #4
    ads2help, Mar 14, 2009 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    You should NOT put up webpages without a DOCTYPE. It is what tells the browser what to do with the information in/on the page.

    A DOCTYPE declaration is mandatory for having webpages validate, btw.

    That said, the reason it works when you remove the DOCTYPE is probably because the js-functions you use is not supported in the DOCTYPE you chose - ie. the "XHTML 1.0 Transitional//EN" part - try using the DOCTYPE for HTML 4 instead:
    Either:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    for the STRICT version, or:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    for the loose/transitional version

    You can read more about DOCTYPES here:http://en.wikipedia.org/wiki/Document_Type_Declaration
     
    PoPSiCLe, Mar 15, 2009 IP