RSS Ticker with AJAX

Read The Full Tutorial.

Author: Dynamic Drive

Download the demo

Description: RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from CNN. Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to display the feed dynamically and with flare. As a pre-requisite then, your site itself must support PHP, though the page using this ticker can be any regular HTML file.

Requirement of this script: Ability to run PHP on your site. Note that page(s) displaying the ticker and the backend PHP script must be on the same domain due to Ajax limitations.

Here are some features of Advanced RSS Ticker (Ajax invocation):

• Displays any RSS feed on the web in a ticker fashion. Specify exactly what components of the feed items to display, such as the title of the item, description, or post date.
• Each RSS feed is cached on the server for best performance. LastRSS feature.
• Total customization of each RSS ticker through the frontend JavaScript- easily specify the RSS cache period, CSS class name to style the ticker, delay between message change, and what parts of the feed to show (ie: title+description).
• Enable or disable a fading effect between message change just by adding or removing two lines of CSS code!
• Ticker pauses onMouseover.
• Display multiple RSS tickers on a page, each with their own independent settings.

A demo trumps any explanation, so here it is:

Demos:

Download the demo

Each ticker is called independently on the page, using the core function:

<script type="text/javascript">
//rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rssticker_ajax("BBC", 1200, "ddbox", "bbcclass", 3500, "date+description")
</script>

Detailed info below.

Directions: The easiest way to install Advanced Ajax ticker is to download the zip file below:

which contains all the files that make up the script. They are:

• demo.htm: working demo on Advanced RSS ticker
• rssticker.js: RSS ticker JavaScript library
• lastrss/bridge.php: PHP script to output RSS feed in XML format, and communicate with our JavaScript via Ajax
• lastrss/lastRSS.php: lastRSS.php class, unmodified.

1) For demo.htm:

Open up "demo.htm", and copy the code found inside into the page(s) you wish the ticker to be displayed in. Make sure the code:

<script src="rssticker.js" type="text/javascript">
//credit notice here
</script>

inside the HEAD section correctly references the location of "rssticker.js" on your server, if it's been moved to a different directory. The code inside the BODY section shows how to invoke an RSS ticker instance:

<script type="text/javascript">
//rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
//1) RSS_id: "Array key of RSS feed in PHP script"
//2) cachetime: Time to cache the feed in seconds (0 for no cache)
//3) divId: "ID of DIV to display ticker in. DIV dynamically created"
//4) divClass: "Class name of this ticker, for styling purposes"
//5) delay: delay between message change, in milliseconds
//6) optionalswitch: "string" to control which parts of an item to display: "date" or "date+description"

new rssticker_ajax("BBC", 600, "ddbox", "bbcclass", 3500, "date+description")

</script>

2) For rssticker.js:

Open up "rssticker.js", and at the top, simply make sure the path to "bridge.php" on your server is correct:

//Relative URL:
var lastrssbridgeurl="lastrss/bridge.php"
//Absolute URL (uncomment below)
//var lastrssbridgeurl="http://"+window.location.hostname+"/lastrss/bridge.php"

If you wish to use an absolute reference to "bridge.php", simply uncomment the last line and configure that instead. The root domain is dynamically constructed due to Ajax being finicky about the syntax. See Load Absolute URL explanation.

3) For bridge.php:

Bridge.php is a custom PHP script that communicates between our ticker script and lastRSS.php using Ajax. Open up this file using any text editor, and edit the variables as instructed by the comments. It is recommended you read up on the documentation for lastRSS to get a full understanding of what each variable means and how you can take advantage of all of the available features.

4) For lastRSS.php: No editing required. Upload as is.

And there you have it!

More information on Advanced RSS Ticker (Ajax invocation)

Once you've successfully installed the script, most day to day changes to the ticker is done easily and on the front end, via the main RSS ticker function:

<script type="text/javascript">
//rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rssticker_ajax("BBC", 1200, "ddbox", "bbcclass", 3500, "date+description")
</script>

A few notes on the parameters above:

• "RSS_id" must be the name of the RSS feed to display as it appears in "bridge.php."
• "cachetime" is in seconds. A good time is at least 30 minutes, or 1800. *
• "divId" is the desired ID for this ticker instance. Can be arbitrary but must be unique for each ticker instance on the page.
• "bbcclass" is the CSS class name to be passed in to style this ticker instance.**
• "optionalswitch" is a string used internally by the ticker script to decide what parts of an item to display. By default, it will just display the title+link of each item. You can pass in "date", or "date+description" to display additional information.

* Regarding the cache time, a tip is to set it to 0 while you're testing out the ticker, to make sure any changes are instantly visible, then change it back to the desired number afterwards. This is extremely helpful, for example, if you've made changes to "bridge.php" to change the format of the date output- that change will only show up instantly if you've set cache to 0.

** If you want a fading effect to occur between message change for the ticker, just add the code:

filter:progid:DXImageTransform.Microsoft.alpha(opacity€);
-moz-opacity: 0.8;

inside your CSS class for that ticker instance. It's that easy! The fade effect uses up about 1/2 second, so you'll want to increase the "delay" parameter accordingly if enabled.

Saving Your Comment