View Full Version : Advanced RSS Ticker Multiple Feeds

03-19-2013, 09:04 PM
1) Script Title: Advanced RSS Ticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/rsstickerajax/index.htm

3) Describe problem: How do I include multiple RSS sources but display them still in a single output?

Thanks :)

03-20-2013, 03:22 PM

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advanced RSS Ticker (Ajax invocation) with multiple switch demo</title>

<script src="rssticker.js" type="text/javascript">

* Advanced RSS Ticker (Ajax invocation)- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more


<style type="text/css">

/*Sample CSS to style the four tickers in this demo*/

width: 400px;
padding: 6px;
background-color: lightyellow;
border: 1px solid #004A00;
position: absolute; /* required - do not change or override */
top: 0; /* required - do not change or override */
left: 0; /* required - do not change or override */
visibility: hidden; /* required - do not change or override */

#cnnbox {
background-color: lightblue; /* override styles for any given ticker via its divId */

.rsstitle{ /*shared class for all title elements in an RSS feed*/
font-weight: bold;

.rssdate{ /*shared class for all date elements in an RSS feed*/
color: gray;
font-size: 85%;

.rssdescription{ /*shared class for all description elements in an RSS feed*/


<select id="choser" onchange="switchtickers(this.value);">
<option value="1">Dynamic Drive</option>
<option value="2">CNN</option>
<option value="3">BBC</option>
<div id="rsstitles"></div><!-- div for feed titles -->
<div style="height: 400px; position: relative; overflow: hidden;"><!-- container for multiple feeds - must be position: relative -->
<script type="text/javascript">
//rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
//1) RSS_id: "Array key of RSS feed in PHP script"
//2) cachetime: Time to cache the feed in minutes (0 for no cache)
//3) divId: "ID of DIV to display ticker in. DIV dynamically created"
//4) divClass: "Class name of this ticker, for styling purposes"
//5) delay: delay between message change, in milliseconds
//6) optionalswitch: "optional arbitrary" string to create additional logic in call back function

var tickers = {
ticker1: {
ticker: new rssticker_ajax("dynamicdrive", 600, "encbox", "tickerclass", 4000, "date+description"),
title: "Dynamic Drive: (Title+date+description shown)"
ticker2: {
ticker: new rssticker_ajax("CNN", 600, "cnnbox", "tickerclass", 3000, "date+description"),
title: "CNN News: (Title+date+description shown)"
ticker3: {
ticker: new rssticker_ajax("BBC", 1200, "ddbox", "tickerclass", 3500, "date+description"),
title: "BBC News: (Title+date+description shown)"

function switchtickers(which){
var id;
for(var ticker in tickers){
id = tickers[ticker].ticker.tickerid;
document.getElementById(id).style.visibility = '';
document.getElementById(tickers['ticker' + which].ticker.tickerid).style.visibility = 'visible';
document.getElementById('rsstitles').innerHTML = tickers['ticker' + which].title;
<a href="http://www.dynamicdrive.com/dynamicindex17/rsstickerajax/">Advanced RSS Ticker</a>.



Feeds for this demo (code goes in bridge.php, replacing its current $rsslist array, or you can just add the feeds to the existing $rsslist array if they're not there):

// List of RSS URLs
"CNN" => "http://rss.cnn.com/rss/cnn_topstories.rss",
"BBC" => "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml",
"dynamicdrive" => "http://www.dynamicdrive.com/export.php?type=new"