CSS Codes
CSS Layouts
FF1+ IE5+ Opr8+

gAjax RSS Pausing Scroller (hosted)

Author: Dynamic Drive

Dec 3rd, 16': Updated gfeedfetcher.js engine to version 2.1, which uses YUI YQL in place of Google Feeds API due to retirement of later. Also adds limitlength() method
Feb 8th, 17': Updated gfeedfetcher.js engine to version 2.2 (by jscheuer1), which adds Atom Feeds support, plus improvements to the limitlength() function

Description: gAjax RSS Pausing scroller is a flexible RSS scroller 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. There is simply no more versatile script RSS scroller out there!

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

  • Uses the gAjax RSS Displayer engine and YUI YQL 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" and more.
  • Supports multiple gAjax RSS scroller 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: (Two 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).
  • gajaxscroller.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

Documentation

Below describes all the available methods at your disposal when calling gfeedpausescroller() 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!

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

Required

 Main gfeedpausescroller() constructor function to create a new instance of gAjax RSS Scroller.

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 scroller=new gfeedpausescroller("someid", "someclass", 2500, "_new")

Method

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

Required

Improved in v2.2

 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.
  • "atom": Optional string of "atom" if the RSS feed is an Atom Feed.

Example:

instance.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")
myrss.addFeed("BBC News", "http://feeds.bbci.co.uk/news/feed.atom", "atom")
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", and "description".

Example:

//eg1: instance.displayoptions("datetime")
//eg2: instance.displayoptions("date label")
//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.limitlength(chars, "fieldtype", [ForceStrip])

defaults to undefined

Improved in v2.2

 Lets you strip any HTML inside a field and limit the number of remaining characters shown inside a particular field, most commonly, the "description" field.

Parameter:

  • chars: An integer specifying the maximum number of characters to show after any HTML has been stripped. Use the keyword "strip" instead to simply strip the output of any HTML tags without imposing a limit on the field length.
  • "fieldtype": The field of each RSS entry to apply the restriction- valid keywords are "titlefield" or "descriptionfield".
  • ForceStrip: Optional Boolean that if set to true always strips a field of any HTML tags

This method can be called more than once to apply the character restriction to both the "title" and "description" fields if needed.

Examples:

//instance.limitlength(150, "descriptionfield")

// Strip field of tags without imposing limit on field length:
//instance.limitlength("strip", "descriptionfield")

//Limit field length to 150 and always trips field of HTML tags (even if below 150 chars):
//instance.limitlength(150, "descriptionfield", true)
instance.addregexp(RegExpLiteral, "replacement_text", "targetfield")

defaults to null

Improved in v2.2

 Lets you perform a search and replace inside a specific field such as the "description" field. The first parameter is a regular expression to isolate the text you wish to replace, and the 2nd, the new text to replace it with. An optional 3rd parameter lets you limit the operation to a specific field within each RSS entry, with the valid keywords being:
  • "titlefield"
  • "labelfield"
  • "datefield"
  • "descriptionfield"

Lets say the description field of your RSS entries contain the "[CDATA[" and "]]" tags wrapped around it that's showing up in the output. To remove them, you can call addregexp() in such a manner:

instance.addregexp(/(\[CDATA\[)|(\]\])/g, '', 'descriptionfield')

The first parameter is a standard JavaScript regular expression that basically detects the presence of either "[CDATA[" or "]]" in the description fields, with the 2nd parameter specifying that they should be replaced with an empty string instead. The 3rd parameter limits the search and replace to just the "description" field.

You can call addregexp() multiple times in your initiation code to apply multiple search and replace operations.

See "Search and replace text within your RSS entries" on the supplementary page for additional info.
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 Scroller 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 Pausing Scroller using the above settings.

Styling the RSS Pausing Scroller

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

Outer Most DIV

Inner DIV containing the RSS feed

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

The outermost purple DIV can be styled through the "id" and/or "classname" attributes you assigned when calling gfeedpausescroller(). The inner DIV (orange) is the DIV that contains the visible RSS entries. Finally, 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:

#scrollerid div p{
background-color: yellow;
}

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

#scrollerid div ul{
background-color: yellow;
}

#scrollerid div 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".

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post