Ajax marquee?

Hello,

I have a database that gets updated with some small message.

What I want is a marquee to be updated with these messages without the page being refreshed. Do you think I could do this with Ajax?

I've tried looking for a javascript news ticker and tried modifying it to update with Ajax but its just too difficult.

Anyone got any advice/help?

Thanks

 

would you want the text of the marquee to change when new data is added, or would you want the new data to be added to the marquee? how many of these small messages would be displayed at one time? just one, or say 10?

 

I would like if a new message got added to the database it would be added to the current set of messages. If a message was removed from the database it would disappear. There could be any amount of messages.

 

Im working in asp. I think I need to call an asp page with serverside code to read the database from a page with ajax to read the file.

 

here is some javascript that will load the XML into a marquee:

<marquee id="m1">Loading...</marquee>
<script type="text/javascript">
var r, xmlHttp, xmlDoc, msgs;
var m1 = document.getElementById("m1");

function loadMsgs() {
    r = Math.floor(Math.random()*20001);
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = showMsgs;
    xmlHttp.open("GET","Default.aspx?r=" + r,true);
    xmlHttp.send(null);
}

function showMsgs() {
    try {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            xmlDoc = xmlHttp.responseXML.documentElement;
            msgs = xmlDoc.getElementsByTagName("msg")
            if (msgs != null) {
                m1.innerHTML = msgs[0].firstChild.nodeValue;
                for(i=1; i<msgs.length; i++) {
                   m1.innerHTML = m1.innerHTML + " - " + msgs[i].firstChild.nodeValue;
                }
            }
            setTimeout("loadMsgs()", 10000);
        }
    }
    catch(e){
    setTimeout("loadMsgs()", 10000);
    }
}

loadMsgs();
</script>

Code (markup):

XML Document (output from 'messages.asp') would look like:

<?xml version='1.0' encoding='utf-8' ?>
<messages>
<msg>This is message 1</msg>
<msg>This is message 2</msg>
</messages>

Code (markup):

The asp file (messages.asp) that would produce this XML, would do something like:

Response.ContentType = "text/xml"
'check database
If thereisnewmessages Then
'output messages in xml format above
Else
Response.End
End If

Code (markup):

 

I'm pretty sure this is compatible with most new browsers, but might need tweaking to work with older IE4 and IE5... I've tested with IE7, Firefox 3.0.7 and Chrome

 

You totally rock dude, thank you very much.

 

I got this working now im looking for a small change.

You can see I've added font tags to wrap around each message. I've also added the line color = "#c0da2d"; . What im looking for is each message to be one of these three colors consecutivly ie.

colora="#c0da2d"
colorb="#da662d"
colorc="#5ada2d"

var r, xmlHttp, xmlDoc, msgs;
var m1 = document.getElementById("m1");

function loadMsgs() {
    r = Math.floor(Math.random()*20001);
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = showMsgs;
    xmlHttp.open("GET","xmltest.asp?r=" + r,true);
    xmlHttp.send(null);
}

function showMsgs() {
    try {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
	color = "#c0da2d";
            xmlDoc = xmlHttp.responseXML.documentElement;
            msgs = xmlDoc.getElementsByTagName("msg");
            if (msgs != null) {
                m1.innerHTML = "<span class=style1><font color=" + color + " >" + msgs[0].firstChild.nodeValue + "</font></span>";
                for(i=1; i<msgs.length; i++) {
                   m1.innerHTML = "<span class=style1><font color=" + color + ">" + m1.innerHTML + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + msgs[i].firstChild.nodeValue + "</font></span>";
                }
            }
            setTimeout("loadMsgs()", 10000);
        }
    }
    catch(e){
    setTimeout("loadMsgs()", 10000);
    }
}

Code (markup):

 

You could alternate it on the server-side: e.g the XML output of your ASP Script would be:

<?xml version='1.0' encoding='utf-8' ?>
<messages>
<msg c="#c0da2d">This is message 1</msg>
<msg c="#da662d">This is message 2</msg>
<msg c="#5ada2d">This is message 3</msg>
</messages>

Code (markup):

Then just modify the script to something like:

var r, xmlHttp, xmlDoc, msgs;
var m1 = document.getElementById("m1");

function loadMsgs() {
    r = Math.floor(Math.random()*20001);
    xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = showMsgs;
    xmlHttp.open("GET","xmltest.asp?r=" + r,true);
    xmlHttp.send(null);
}

function showMsgs() {
    try {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            xmlDoc = xmlHttp.responseXML.documentElement;
            msgs = xmlDoc.getElementsByTagName("msg")
             if (msgs != null) {
                m1.innerHTML = "<span class=style1><font color=" +[B] msgs[0].getAttribute("c") [/B]+ " >" + msgs[0].firstChild.nodeValue + "</font></span>";
                for(i=1; i<msgs.length; i++) {
                   m1.innerHTML = "<span class=style1><font color=" +[B] msgs[i].getAttribute("c") [/B]+ ">" + m1.innerHTML + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + msgs[i].firstChild.nodeValue + "</font></span>";
                }
            }
            setTimeout("loadMsgs()", 2000);
        }
    }
    catch(e){
    setTimeout("loadMsgs()", 2000);
    }
}

loadMsgs();

Code (markup):

 

font size, type etc can also be changed using the same principle

 

Thank you very much, it looks and works great.