Ajax news bar problem

Richy · 05-05-2009, 05:45 PM

Hello,
I have this script;

Code:

<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>

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,

Richy · 05-05-2009, 05:47 PM

Also, this is the content of webticker_lib.js;

Code:

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);
}

Richy · 05-05-2009, 07:12 PM

Hi,
I changed the code as;

Code:

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(); 
}

Now, the content is ticking in Firefox. However, now the text accelerates continuously

. What's the crazy problem?

Richy · 05-07-2009, 04:14 PM

Any idea ?

A1ien51 · 05-07-2009, 09:26 PM

store your timeout into a variable

Code:

ticktock = window.setTimeout("TICKER_tick()", 30);

and you need to cancel it when you get the Ajax call back

Code:

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;
  window.clearTimeout(ticktock);
  ticker_start(); 
}

Eric

Richy · 05-07-2009, 10:23 PM

Quote:

Originally Posted by A1ien51

store your timeout into a variable

Code:

ticktock = window.setTimeout("TICKER_tick()", 30);

and you need to cancel it when you get the Ajax call back

Code:

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;
  window.clearTimeout(ticktock);
  ticker_start(); 
}

Eric

Hi,
Where can I store the variable in these codes?

A1ien51 · 05-07-2009, 10:37 PM

ticktock is the variable I was talking about.

Richy · 05-07-2009, 10:42 PM

Quote:

Originally Posted by A1ien51

ticktock is the variable I was talking about.

I can't understand anything about Javascript. I tried to change;

Code:

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;
  window.clearTimeout(ticktock);
  ticker_start(); 
}

And I added

Code:

ticktock = window.setTimeout("TICKER_tick()", 30);

in begining of the codes. Nothing changed :S..