Create Updatable Scroller Text

This tutorial came from a project of mine. At that time, someone ask me to create a scrolling text that updated when the data is modified. After look into the problem I found that this problem can be done using simple ajax and php script. This tutorial will show you how I completed this task.

First, let us create html page as the template.

<html>
<head>
<title>.: Ticker Demo :.</title></head>
<body>
<table width="35%">
<tr><td>
<div class="recent-job">
<span class="tickerDiv">
<a id="tickerAnchor" xhref="http://192.168.100.30/blog/#" mce_href="http://192.168.100.30/blog/#" class="latestJob"></a>
</span>
</div>
</td></tr>
<tr><td> </td></tr><br /> </table>
</body>
</html>

Now, let us create javascript for scroller function.

<script language="JavaScript" type="text/javascript">
var characterTimeout = 30; //time out per character
var tickerTimeout = 2000; //time out after complete ticker
var ajaxRequestTimeout = 25000; //time out per ajax request
var currentLength = 0;
var tickerTitles = ""; //ticker data
var tickerLinks = ""; //ticker linksĀ¼br> function doLaunchTicker() {
var thisTimeout;
var anchorObject = document.getElementById("tickerAnchor");
if(currentLength == 0) {
tickerSummary = tickerTitles.replace(/"/g,'"');
thisLink = tickerLinks;
anchorObject.href = thisLink;
}
anchorObject.innerHTML = tickerSummary.substring(0,currentLength);
if(currentLength != tickerSummary.length) {
currentLength++;
thisTimeout = characterTimeout;
}
else {
currentLength = 0;
thisTimeout = tickerTimeout;
}
setTimeout("doLaunchTicker()", thisTimeout);
}
</script>

Put this inside html <head> tag. We should insert onload tag that call doLaunchTicker function.

<body onload="doLaunchTicker()">

At this stage the code should run well. If you want to try, set tickerTitles to something you want.

Next step is create ajax call function. Before that, let us create text file that define data we need to show. This file consist of 3 line, the first is ticker text we need to show, second line is link address when we click ticker text, while third line just an empty line. Click here to download sample data. Save it as ticker-file.txt. Ok let’s create ajax function. Oh, wait I forgot to tell that we’ll use prototype library. So, we need to declare it first.

<script src="prototype-1.4.0.js" mce_src="prototype-1.4.0.js" type="text/javascript" language="javascript"></script>

If you need help with prototype, there’s a place you can visit. Now back to our ajax function.

<script type="text/javascript" language="javascript">
function getTickerData()
{
var url = 'http://<?php echo $_SERVER['HTTP_HOST']; ?>/ticker/ticker-file.txt';
var myAjax = new Ajax.Request( url, {
method: 'get', parameters: "",
onComplete: function(response){
data = response.responseText.split("\n");
tickerTitles = data[0];
tickerLinks = data[1];
}
});
setTimeout("getTickerData()", ajaxRequestTimeout);
}
function startTicker(){
setTimeout("getTickerData()", 500);
}
</script>

Basically, getTickerData just read our previously created ticker-file.txt and fetch it into array and then set tickerTitles and tickerLinks into a corresponding data. our startTicker just set timer to start ajax request. Then we need to call startTicker within out body’s onload attribute. Our body should look like this now.

<body onload="doLaunchTicker();startTicker()">

You can update ticker-file.txt manually by uploading a new one using FTP. But, if you don’t want this hard way, you can use ticker.setting.php that’s included in source zip.

Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.