CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)
-   -   Ajax news bar problem (http://www.codingforums.com/showthread.php?t=165553)

Richy 05-05-2009 05:45 PM

Ajax news bar problem
 
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 :D. 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 (Post 814282)
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 (Post 814303)
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..


All times are GMT +1. The time now is 08:13 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.