New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr8+

gAjax RSS Ticker (hosted)

Author: Dynamic Drive

Description: gAjax RSS Ticker is a flexible RSS ticker that's extremely easy to set up to boot. Using the gAjax RSS Displayer script engine, there's nothing to install or host on your server. Furthermore, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify how many entries to show at once, what portion of each entry to show etc.

Here's a summary of the features of this script:

  • Uses the gAjax RSS Displayer engine and Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.
  • Specify multiple RSS feeds to display, with the results intermixed.
  • Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "Digg" then "Slashdot").
  • Set the number of total RSS entries to show. If multiple feeds are specified, that number is spread out evenly amongst the feeds.
  • Set the number of RSS entries to show at once (default is 1).
  • Specify which portions of each RSS entry to show, such as its "label", "date", "description", "snippet" and more.
  • Supports multiple gAjax RSS ticker instances on the same page.

Demo:

Example 1: (Single RSS feed, 10 entries, "date" field enabled, 1 entry per page

Example 2: (Two RSS feeds, 20 entries, "label", "datetime", and "snippet" fields enabled, 5 entries per page

Example 3: (Three RSS feeds, 8 entries, "datetime" and "snippet" fields enabled, 2 entries per page


Directions Developer's View

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

Select All

Step 2: Download the below .js file and image, which are also referenced by the code above,  and upload to your site:

  • gfeedfetcher.js (inherited from gAjax Feed Displayer. No need to edit).
  • gajaxticker.js (configure path to "loading" gif at the top)
  • (right click and choose "Save As").

Step 3: Finally, to display the desired RSS feeds, just add the below sample HTML to your page, which illustrates 3 different examples using various feeds (Slashdot, Digg, CSS Drive, CNN etc):

Select All

That's it! Make sure you've entered a valid Google code API key inside the code of Step 1, or you won't have lift off.

Documentation

Below describes all the available methods at your disposal when calling gfeedrssticker() class. Note that all except one of its methods are inherited from the script gAjax RSS Displayer, so if you're familiar with that script, you'll feel right at home!

gfeedrssticker object and methods
Constructor Description
new gfeedrssticker("id", "cssclass, pause,
"[optional_link_target]")

Required

Main gfeedrssticker() constructor function to create a new instance of gAjax RSS Ticker.

Parameters:

  • id: An arbitrary but unique string to be used as the CSS "id" attribute of the outermost container DIV.
  • cssclass:  An arbitrary string to be used as the CSS "class" attribute of the outermost container DIV.
  • pause: Integer that sets the pause between scrolling in milliseconds (ie: 3000).
  • [optional_link_target]: An optional parameter that lets you set the link target for the RSS feed links.

Example:

var ticker=new gfeedrssticker("someid", "someclass", 2500, "_new")

Method

Description

instance.addFeed("label", "feedurl")

Required

Adds a feed to be retrieved and shown (based on its full URL). Call this function more than once to add multiple feeds.

Parameters:

  • label: An arbitrary string used to "label" this feed (ie: "Slashdot"). This label can then be optionally shown alongside each entry, or to sort multiple feeds based on their label.
  • feedurl: The full URL to the feed.

Example:

instance.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")

instance.displayoptions(space_delimited_keywords) By default, only the title of each RSS entry is shown. Specify additional fields such as each entry's date and description by calling displayoptions() and passing in specific keywords, each separated by a space, for example, "datetime label description".

Parameter:

  • space_delimited_keywords: A list of keywords representing the additional fields of each entry you wish to show, separated by a space. The list of valid keywords are "date", "time", "datetime", "label", "snippet", and "description".

Example:

//eg1: instance.displayoptions("datetime")
//eg2: instance.displayoptions("date label snippet")
//eg3: instance.displayoptions("datetime label description")

instance.setentrycontainer(TagName) Changes the element used to contain each RSS entry. By default, it is a DIV element (<li>), so that the RSS entries are individually wrapped in a DIV tag. You can, for example, pass in "li" or "p" so the entries are each wrapped around a DIV or P, respectively.

Parameter:

  • TagName: Name of the HTML element you wish to encase each RSS entry using. Default is "div".

Examples:

//eg1: instance.setentrycontainer("li")
//eg2: instance.setentrycontainer("p")

instance.filterfeed(int, ["sortby"])

Required

Sets the number of entries to retrieve and display. An optional second parameter lets you sort the results by "date", "label", or "title".

Parameter:

  • int: An integer specifying the total number of entries to fetch and display. If multiple feeds are defined, this number is distributed amongst the feeds. For example, if you've specified a value of "6" and there are 2 RSS feeds, each feed will show 3 entries.
  • ["sortby"]: An optional second parameter lets you sort the results in a variety of ways. The valid keywords are "date", "label", or "title". Default is by "date".

Examples:

//eg1: instance.filterfeed(6, "date")
//eg2: instance.filterfeed(5, "label")

instance.entries_per_page(int)

Note: Non inherited method

Sets the number of entries to show at once (per page). Default is 1.

Parameter:

  • int: An integer specifying the number of entries to show per page. This value should obviously be smaller than the total number of entries to show (see above).

Examples:

//eg1: instance.entries_per_page(2)

instance.onfeedload() Call back function that runs when the RSS Ticker has fully loaded (all of its feeds that is). Use it to execute custom code just before the RSS Displayer is shown on the page.

Examples:

instance.onfeedload=function(){
 alert("RSS Displayer has loaded!")
}

instance.init()

Required

Call this function at the very end to initialize the gAjax RSS Ticker using the above settings.

Styling the RSS Ticker

Every aspect of each RSS Pausing Ticker can be styled using CSS. Structurally the ticker looks like this:

Main ticker DIV container

RSS entry 1
RSS entry 2
RSS entry 3
And so on...

The main purple DIV can be styled through the "id" and/or "classname" attributes you assigned when calling gfeedrssticker(). Then there are the yellow containers, defined using the setentrycontainer() method (defaults to "div") and is wrapped around each RSS entry individually. So for example, by calling setentrycontainer("p") each yellow container is now a paragraph, and can be accessed via the CSS:

#tickerid p{
background-color: yellow;
}

Of if you've called setentrycontainer("li") instead, the yellow boxes can be style using:

#tickerid ul{
background-color: yellow;
}

#tickerid ul li{
margin-bottom: 5px;
}

Now, within each yellow box, you can style the various components of the RSS entry via the CSS classes ".titlefield", ".labelfield", ".datefield".