Ajax News Bar Problem

Discussion in 'JavaScript' started by manyakca, May 5, 2009.

  1. #1
    Hello,
    I have this script;

    <html>
    <head>
    <script type="text/JavaScript" language="JavaScript">
    var xmlHttp=false;
    try {
    xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
    try {
    xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
    }
    catch (E) {
    xmlHttp = false;
    }
    }
    if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
    try {
    xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
    xmlHttp=false;
    }
    }
    if (!xmlHttp && window.createRequest) {
    try {
    xmlHttp = window.createRequest();
    }
    catch (e) {
    xmlHttp=false;
    }
    }
    function callServer(){
    //burada çağiracağin sayfayı yazarsın
    var url = "xml.php";
     
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = updatePage;{
    if (xmlHttp.readyState==4) {
    alert(xmlHttp.responseText)
    }
    }
    xmlHttp.send(null)
    }
    function updatePage(){
    //4 sorun yoksa demek
    if(xmlHttp.readyState == 4){
    //gelen cevap
    var response = xmlHttp.responseText;
    //hangi div gelcekse buraya yazılcak
    TICKER.innerHTML = response;
    //500 milisaniyede bir fonksiyonu caÄŸirir
    setTimeout('callServer()',5000);
    }
    }
    callServer('url');
    </script>
    </head>
    <div STYLE="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:620px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false" id="TICKER">DSADADA</div>
    
    <script type="text/javascript" src="webticker_lib.js" language="javascript"></script>
    
    </html>
    Code (markup):
    When TICKER DIV is updated, the news bar starts not ticking in Firefox. In Internet Explorer, TICKER DIV is sometimes updating, sometimes not. How can we fix this problem? Thank you,
     
    manyakca, May 5, 2009 IP
  2. manyakca

    manyakca Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Also, this is the content of webticker_lib.js;

    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);
    }
    Code (markup):
     
    manyakca, May 5, 2009 IP
  3. manyakca

    manyakca Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,
    I changed the code as;

    if(xmlHttp.readyState == 4){
    var response = xmlHttp.responseText;
    TICKER.innerHTML = response;
    setTimeout('callServer()',5000);
    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(); 
    }
    Code (markup):
    Now, the content is ticking in Firefox. However, now the text accelerates continuously :D. What's the crazy problem?
     
    manyakca, May 5, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    it stacks up, thats why. every 5 seconds you add a new handler that gets news -- because upon each update you do not clear the previous setTimeout before adding make a new one.

    if you do the former, do in global scope: var timeoutFoo;

    oncomplete:
    clearTimeout(timeoutFoo); // clear al older assignments, just in case so they dont stack up.
    timeoutFoo = setTimeout(callServer, 5000); ... // reinit.

    or you can check the typeOf timeoutFoo and only do something if its not a number (which it will be if already assgined).

    incidentally, not a good script, should be much lighter and the only things being returned by the php script should be the headlines as a json object... anyway good luck :)
     
    dimitar christoff, May 5, 2009 IP
  5. manyakca

    manyakca Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you for your reply dimitar christoff..
    Unfortunately I can't find the better script.

    I don't understand your solution because I have no ability with JavaScript :).

    How can I locate in my codes these?
     
    manyakca, May 5, 2009 IP
  6. manyakca

    manyakca Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Any idea ?
     
    manyakca, May 7, 2009 IP