Download RSS scroller script

Demo

Bookmark and Share

Download files

You can download the entire project from this zip file.

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/

Setup

Server side support

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

Comments

No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com