A great, slick way to display RSS feeds. Nice and smooth sliding effects.
Server side support
Usage:

This script requires that you have access to PHP on your webserver.
Creating RSS box and specify url of feed

This scripts loads content from an external RSS file into a div on your page. The first you have to do is to put in an empty div where you want the RSS box to appear. Example:

<div id="rssBox">
</div>

Then you need to specify

* The url to your RSS source
* Which div you want the RSS data to be placed
* How many items you want to read from the source
* Time between each item is shown in the box.

All this is something you specify by calling a Javascript function named “insertAjaxContent”. Example:

insertAjaxContent('rssBox','http://www.dhtmlgoodies.com/rss/dhtmlgoodies.xml',5,3);

“rssBox” refers to the empty div you created, Then we have the url to the external RSS feed. I have specified that I only want the 5 newest items to be shown and the script should show an item for 3 seconds before switching to the next one.
Layout

The script uses plain CSS for the layout. This is the CSS for the demo:

#rssBox{
  width:300px;
  margin:5px;
  float:right;
  height:300px;
  border:1px dotted #317082;
  padding:3px;
  font-size:0.8em;
  background-color:#E2EBED;

}
#rssBox .slide{ /* A specific slide */
  background-color:#E2EBED; /* Light blue background color */
}
.rssBoxDate{
  display:none;  /* I don't want to show the date */
}
.rssBoxHeading{  /* Heading of RSS item */
  font-weight:bold;
  color:#317082;
  margin:0px;
}
.rssBoxDescription{  /* Description of RSS item */

}
.rssBoxLink{  /* Read more link */
  color:#F00;
  text-decoration:none;
}
.rssBoxLink:hover{  /* Read more link - mouse over */
  text-decoration:underline;
}
Javascript variables

You have two Javascript variables available:

var rssBoxTxt_readMore = 'Read more';
var rssBoxOpenLinksInNewWindow = true;
var rssBoxPadding = 2;
var rssBox_slideSpeed = 7;
var rssBox_waitBetweenEachSlideStep = 5;

* rssBoxTxt_readMore = Link label, i.e. the “Read more” link.
* rssBoxOpenLinksInNewWindow = Open “Read more” links in new window or not. true = new window, false = same window
* rssBoxPadding = Padding inside parent box
* rssBox_slideSpeed and rssBox_waitBetweenEachSlideStep = Determines speed of sliding

Demo: http://www.dhtmlgoodies.com/scripts/rss-scroller/rss-scroller.html
Download: http://www.dhtmlgoodies.com/scripts/rss-scroller/rss-scroller.zip
Files included in package
* rss-scroller.html = The main HTML you open in your browser
* js/ajax.js = Ajax (SACK library)
* readRSS.php = File that reads RSS data from a source. rss-box.html uses Ajax to retreve data from this file.
* lastRSS.php = RSS parser download from http://lastrss.webdot.cz/

Source: http://www.dhtmlgoodies.com/index.html?whichScript=rss-scroller

Related Listings:

1. jFeed – jQuery Feed Parser A lightweight JavaScript feed parser based on jQuery and couldn’t...
2. Week Planner Script An awesome weekly planner. Great use of JavaScript and cookies....
3. Sliding Menu for script.aculo.us It’s been a while since the original post Sexy sliding...
4. Slide In Help Panel A “help panel” will slide in from the left or...
5. Floating Window With Tabs This is a cross browser DHTML window script with support...

Do you like this post?

Email: