New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr8+

Ajax XML Ticker (txt file source)

Author: Dynamic Drive

Feb 17th, 2010 (v1.1): Adds ability to periodically refetch contents of external file. Fixed IE clearType font issue.

Description: This is an Ajax enhanced ticker script that lets you use a text file as the contents of the ticker to show! Easily define your messages, which support rich HTML, all inside this external text file. Now there's no more excuse to not update the contents of your ticker more often! Furthermore, the script can be set to refetch the external file periodically, so any changes to the external file is reflected and shown inside the ticker without the user having to reload the page.

As a side note, while we're labelling this script "XML ticker", technically, it's not XML, as the external file source is just a regular text file, not XML file. Since XML makes it cumbersome to include rich HTML inside it, we decided to go with a text file that's structured similar to XML instead. Also, note that due to Ajax limitations, the ticker script and text file to draw from need to be on the same domain/server.

Demo:

Directions Developer's View

Step 1: Insert the code into the HEAD section of your page:

Select All

The above references an external JavaScript file, which you should upload to your server:

ajaxticker.js (right click and choose "Save As").

Step 2: Then, to display a ticker instance on your page, paste the below sample code into the BODY of your page:

<script type="text/javascript">

var xmlfile="tickercontent.txt" //path to ticker txt file on your server.

//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script>

where "xmlfile" is an arbitrary variable that contains the path to the ticker content txt file on your server, in this case, "tickercontent.txt." If you wish to specify an absolute URL to the txt file on your server, you should use the syntax:

var xmlfile=="http://"+window.location.hostname+"/subdir/tickercontent.txt"

The "window.location" portion returns the root domain of your site dynamically. The root domain is dynamically constructed due to Ajax being finicky about its syntax (see Load Absolute URL for an explanation on this).

Function ajax_ticker() function is what you call to display a ticker instance on the page:

ajax_ticker(xmlfile, divId, divClass, [delay], optionalfadeornot)

where:

  1. "divId" is an arbitrary but unique ID to be used for this ticker

  2. "divClass" is an arbitrary CSS class name for additional styling purposes

  3. [delay] is an array either in the form [delay], or [delay, refetchdelay]. The first value, delay, sets the delay between message changes in milliseconds. The second value, refetchdelay, if defined, causes the script to refetch the external file periodically based on the value of refetchdelay (milliseconds unit). For more info on this parameter, see here.

  4. "optionalfadeornot" is an optional string that enables a fade in effect if defined. Enter "fade" to enable the effect, or remove it to disable it.

You can call this function multiples to display more than one ticker on the page.

Here are a couple of examples:

new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade") //rotates every 3.5 seconds

new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500, 60000], "fade") //rotates every 3.5 seconds plus refetch xml file every minute

Syntax for "tickercontent.txt"

Finally, the syntax for "tickercontent.txt" is very simple- simply wrap each ticker message inside its own <div class="message"> tag. You're free to include HTML inside the message as well:

<div>
<div class="message">
<a href="http://www.javascriptkit.com" target="_new">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!
</div>

<div class="message">
<a href="http://www.codingforums.com">Coding Forums 2</a><br />Web coding and development forums.
</div>

<div class="message">
<a href="http://www.cssdrive.com">CSS Drive</a><br />Categorized CSS gallery and examples.
</div>
</div>

Note the outermost DIV that should surround all of your message DIVs, which is required to ensure the entire contents when fetched via Ajax remains a valid XML document.

Getting the script to refetch the external file periodically

As mentioned, Ajax XML Ticker can be set to refetch the external file containing its contents every x milliseconds, by defining a 2nd value inside the delay parameter:

var xmlfile="tickercontent.txt"
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500, 60000], "fade") //rotates every 3.5 seconds plus refetch xml file every minute

This causes the script to re-download "tickercontent.txt" every minute (60000 milliseconds) while the script is left running on the page without a reload.

Now, there's no point in setting the ticker to periodically refetch the external file if the file itself doesn't change periodically. So how do you go about doing the later? One common approach is via PHP and a simple cron job. The idea is to create a PHP script that gets the content you want using file_get_contents(), then saving it as a static file (ie: "tickercontent.txt") in the format required by the ticker script, which is each content wrapped in a DIV class="message" element. Then, create a cron job on the server to call this PHP script periodically, resulting in the static file being updated automatically. The ticker script then would be set to use this static file as its content source.