Dynamic Ajax Content For News Bar

Discussion in 'JavaScript' started by manyakca, Mar 27, 2009.

  1. #1
    Hi,
    I try to make an ajax script that can take the content from an HTML/PHP/TXT file and can show the content in a ticker/news bar.

    I found webticker_lib.js very nice and basic for news bar. Also, I use jquery to update content.

    My codes;

    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="jquery.js"></script> 
    <script>
         jQuery.noConflict();
    </script>
    <DIV ID="TICKER" 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"></DIV>
    <script type="text/javascript" src="webticker_lib.js" language="javascript"></script>
    <script language="javascript"> 
    function veriler(){ 
    jQuery.get("metin.html",function(data){ jQuery('#TICKER').html(data); }); 
    } 
    window.setInterval("veriler()",100); 
    </script>
    
    Code (markup):
    And webticker_lib.js file;

    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):
    However, in Firefox the text can change but it doesn't stream. In IE7, both of them are not working! The text doesn't change (although manually refresh) and doesn't stream in IE7.

    I cannot understand why working. What can be problem? How can I solve this? Thank you,
     
    manyakca, Mar 27, 2009 IP