Bookmark to del.icio.us
FF1+ IE5+ Opr8+
Ajax XML Ticker (txt file source)
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.
Step 1: Insert the code into the HEAD section of your page:
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:
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:
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).
ajax_ticker(xmlfile, divId, divClass, [delay], optionalfadeornot)
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", , "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
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.
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:
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