Software

More fun with Google Dynamic RSS Feed Control

Ryan Boudreaux illustrates how to employ some of the option variables in the Google Dynamic RSS Feed Control.

This piece is a continuation of two previous blog posts on RSS Feeds including "How to work with RSS using Google Feed API and JavaScript" and "Aggregate multiple RSS feeds with customized display features." This segment will cover more fun options with the Google Dynamic Feed Control -- altering the number of results displayed, the display time of the featured result, and the fadeout time; disabling the scrolling on fadeout; changing the linking on display results; disabling pause on hover; and other option properties.

Number of results

Want to go with more than the default of four results? No problem, add in the numResults property into the existing JavaScript for each Dynamic Feed Control you want, and you can modify it to suit your needs:

var options = {
numResults : 8
}
new GFdynamicFeedControl(feed, "feedControl", options);
Figure B shows the results (Chrome v 21.0).

Alter display time

The default display time of 5 seconds can be modified as well using the displayTime property as shown in the code snippet below, which sets the display time to 10000 milliseconds (10 seconds) , and gets added to the JavaScript options variable for each Dynamic Feed Control you wish to update.

  displayTime : 10000

The above code was added to the Dynamic Feed Control variable options as shown in the snippet below:

  function loadFeedControl() {
var options = {
    numResults : 8,
    displayTime : 10000
  }

Alter fadeout

You can alter the fade out time that it takes to transition between display times as each result replaces the other during the cycle using the fadeOutTime property of the options variable. By default the fadeout time is 1 second, and note that a fadeOutTime of 0 subdues any transitions. The addition to the variable option property appears in the code snippet below:

var options = {
    numResults : 8,
    displayTime : 10000,
    fadeOutTime : 5000
}

Disable scrolling on fadeout

By default, after entries have been displayed for the variable option property displayTime, the next entry will be transitioned into the view; however, as part of this transition, the entry scrolls downward as well as fades out. To control this behavior, you can apply the scrollOnFadeOut property. The following snippet reveals the variable option property added to the bottom of the code below:

var options = {
    numResults : 8,
    displayTime : 10000,
    fadeOutTime : 5000,
    scrollOnFadeOut : false
}

Alter linking on entry results

By default, entry results are linked to their original source, however, if you want to link the source URL provided in the feed to something separate, then you can apply the linkTarget variable options property. This option takes a string, which will be used to specify the link target of the entry result. A sample code snippet is shown below:

var options = {
    numResults : 8,
    displayTime : 10000,
    fadeOutTime : 5000,
    scrollOnFadeOut : false,
    linkTarget : google.feeds.LINK_TARGET_BLANK
  }

Disable pause on hover

By default, entry results will pause when the mouse hovers over them, allowing the user to get a closer look at the title/link and description; hovering over the list in vertical mode will select the entry. You can control this behavior using the pauseOnHover property of options. The following snippet demonstrates this.

var options = {
    numResults : 8,
    displayTime : 10000,
    fadeOutTime : 5000,
    scrollOnFadeOut : false,
    linkTarget : google.feeds.LINK_TARGET_BLANK,
    pauseOnHover : false
  }
Other variable option properties available for the Dynamic Feed Control include horizontal mode, stacked vertical mode, static titles, entry transition, feed transition, and feed load callbacks. Many of these features are used in the "Hello World" demonstration example, which displays Hollywood News with three feeds from TMZ, People, and E-Online, as shown in Figure C below:

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments