How to let user choose which feed he wants to see with input button.

**OMaluco** · 08-16-2010, 05:54 PM

1) Script Title: gAjax RSS Ticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...xrssticker.htm

3) Describe problem: I apllied this script in my blog and it works fine but...I want to give the oportunity to my readers to choose the feed they want to see instead of give them 1 or more feeds to view. I was thinking of an input button to choose for example between BBC feeds and CNN feeds.

Is it possible? How?

Thank you for your help and sorry for my english. I am from Portugal.

**jscheuer1** · 08-16-2010, 08:07 PM

Like this (don't forget to put in your Google api key)?

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>

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

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

/***********************************************
* gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#CSS{ /*Demo 1 main container*/
width: 450px;
height: 28px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
position: absolute;
}

#Social{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
visibility: hidden;
position: absolute;
}

#Social ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#Social ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#News{ /*Demo 3 main container*/
width: 250px;
height: 280px;
border: 1px solid navy;
padding: 4px;
visibility: hidden;
position: absolute;
}

#News p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}

code{ /*CSS for insructions*/
color: red;
}

#feeds {
position: relative;
}
</style>
<script type="text/javascript">
function togFeeds(){
	var feeds = [cssfeed, socialfeed, newsfeed];
	for (var i = feeds.length - 1; i > -1; --i){
		feeds[i].tickerdiv.style.visibility = i === togFeeds.num? 'visible' : 'hidden';
	}
	document.getElementById('feed').innerHTML = feeds[togFeeds.num].tickerid + ':'
	togFeeds.num = (togFeeds.num + 1) % feeds.length;
}
togFeeds.num = 1;
</script>
</head>
<body>
<div id="feeds">
<input type="button" onclick="togFeeds();" value="Toggle Feeds">
<!-- <h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> -->
<div id="feed">CSS:</div>
<script type="text/javascript">

var cssfeed=new gfeedrssticker("CSS", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>



<!-- <h3>Example 2: (Two RSS feeds, 20 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, 5 entries per page</h3> -->

<script type="text/javascript">

var socialfeed=new gfeedrssticker("Social", "example2class", 3000, "")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>




<!-- <h3>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, 2 entries per page</h3> -->

<script type="text/javascript">

var newsfeed=new gfeedrssticker("News", "example3class", 2500, "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.entries_per_page(2)
newsfeed.init() //Always call this last

</script>
</div>
</body>
</html>

**OMaluco** · 08-16-2010, 08:50 PM

Dear jscheuer1,

thanks! It works...almost perfect....it does what i wanted to do but...they stay behind other things on my blog. I cant understand why.

Any idea?

Thanks again!

**jscheuer1** · 08-16-2010, 09:55 PM

Sounds like a layout/style issue. I used absolute positioning to enable the script to switch the feeds. The container they are in is relatively positioned -

From the stylesheet of my demo:

Code:

#feeds {
position: relative;
}

and its markup:

Code:

<div id="feeds">
<input type="button" onclick="togFeeds();" value="Toggle Feeds">
<!-- <h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> -->
<div id="feed">CSS:</div>
<script type="text/javascript">

var cssfeed=new gfeedrssticker("CSS", "example1class", 2000, "_new")
cssfeed.addFeed(" . . .
[SNIP!]
 . . . ://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.entries_per_page(2)
newsfeed.init() //Always call this last

</script>
</div>

But it has no height. If you give it a height as high as the tallest feed, say:

Code:

#feeds {
position: relative;
height: 300px;
}

- whatever works out for you, that will probably take care of it.

Or you might want to use this modified version, it adjust to the height of any given feed:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdqvl6yCCl39fDLKK9GVwzxTlGbvVmibuY2kVQYy3kV9f1ueOCBRdbSAKQw824dFLL7Hj_4D_vHuNOA"></script>

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

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

/***********************************************
* gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#CSS{ /*Demo 1 main container*/
width: 450px;
height: 28px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}

#Social{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
visibility: hidden;
position: absolute;
}

#Social ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#Social ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#News{ /*Demo 3 main container*/
width: 250px;
height: 280px;
border: 1px solid navy;
padding: 4px;
visibility: hidden;
position: absolute;
}

#News p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}

code{ /*CSS for insructions*/
color: red;
}

#feeds {
position: relative;
}
</style>
<script type="text/javascript">
function togFeeds(){
	var feeds = [cssfeed, socialfeed, newsfeed];
	for (var i = feeds.length - 1; i > -1; --i){
		feeds[i].tickerdiv.style.visibility = i === togFeeds.num? 'visible' : 'hidden';
		feeds[i].tickerdiv.style.position = i === togFeeds.num? 'static' : 'absolute';
	}
	document.getElementById('feed').innerHTML = feeds[togFeeds.num].tickerid + ':'
	togFeeds.num = (togFeeds.num + 1) % feeds.length;
}
togFeeds.num = 1;
</script>
</head>
<body>
Some content before
<div id="feeds">
<input type="button" onclick="togFeeds();" value="Toggle Feeds">
<!-- <h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> -->
<div id="feed">CSS:</div>
<script type="text/javascript">

var cssfeed=new gfeedrssticker("CSS", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>



<!-- <h3>Example 2: (Two RSS feeds, 20 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, 5 entries per page</h3> -->

<script type="text/javascript">

var socialfeed=new gfeedrssticker("Social", "example2class", 3000, "")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>




<!-- <h3>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, 2 entries per page</h3> -->

<script type="text/javascript">

var newsfeed=new gfeedrssticker("News", "example3class", 2500, "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.entries_per_page(2)
newsfeed.init() //Always call this last

</script>
</div>
Other content after
</body>
</html>

In either case, other styles/layout of you page may require yet another approach.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**OMaluco** · 08-16-2010, 11:49 PM

Now is a mess....

The first togllefeed function that you posted was ok after i put the height field #feed in the style sheet. Then i try the other solutions and i cant put it right again....

this toggles between the 3 examples with a button...but what i really want is for example:

2 buttons- BBC and CNN
on the style sheet the 2 feeds(BBC and CNN) uses the same (#News) each must be called separatelly..because I want to give the reader the oportunity to see one or the other. And so on...imagine like 3 magazines and 2 television channels, it will be 5 buttons to call 5 diferent feeds.

Thank you for your time....I am no expert on this, almost a noob but I want to learn...

**OMaluco** · 08-17-2010, 12:06 AM

Ok, the mess was my fault, i didnt copy the last code the right way. Sorry.

And how about my previous request?

Thank you again. You are very kind.

**jscheuer1** · 08-17-2010, 02:06 AM

Two feeds with one button each, with a set height:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdqvl6yCCl39fDLKK9GVwzxTlGbvVmibuY2kVQYy3kV9f1ueOCBRdbSAKQw824dFLL7Hj_4D_vHuNOA"></script>

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

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

/***********************************************
* gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#CSS{ /*Demo 1 main container*/
width: 450px;
height: 28px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
position: absolute;
}

#Social{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
visibility: hidden;
position: absolute;
}

#Social ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#Social ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#feeds {
position: relative;
height: 240px;
}
</style>
<script type="text/javascript">
function selectFeed(feed){
	var feeds = [cssfeed, socialfeed];
	for (var i = feeds.length - 1; i > -1; --i){
		feeds[i].tickerdiv.style.visibility = 'hidden';
	}
	feed.tickerdiv.style.visibility = 'visible';
	document.getElementById('feed').innerHTML = feed.tickerid + ':'
}
</script>
</head>
<body>
Some content before
<div id="feeds">
<input type="button" onclick="selectFeed(cssfeed);" value="CSS Feed"> <input type="button" onclick="selectFeed(socialfeed);" value="Social Feed">
<!-- <h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> -->
<div id="feed">CSS:</div>
<script type="text/javascript">

var cssfeed=new gfeedrssticker("CSS", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>


<script type="text/javascript">

var socialfeed=new gfeedrssticker("Social", "example2class", 3000, "")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>


</div>
Other content after
</body>
</html>

Same thing, except with the selected feed determining the height:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdqvl6yCCl39fDLKK9GVwzxTlGbvVmibuY2kVQYy3kV9f1ueOCBRdbSAKQw824dFLL7Hj_4D_vHuNOA"></script>

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

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

/***********************************************
* gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#CSS{ /*Demo 1 main container*/
width: 450px;
height: 28px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}

#Social{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
visibility: hidden;
position: absolute;
}

#Social ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#Social ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#feeds {
position: relative;
}
</style>
<script type="text/javascript">
function selectFeed(feed){
	var feeds = [cssfeed, socialfeed];
	for (var i = feeds.length - 1; i > -1; --i){
		feeds[i].tickerdiv.style.visibility = 'hidden';
		feeds[i].tickerdiv.style.position = 'absolute';
	}
	feed.tickerdiv.style.visibility = 'visible';
	feed.tickerdiv.style.position = 'static';
	document.getElementById('feed').innerHTML = feed.tickerid + ':'
}
</script>
</head>
<body>
Some content before
<div id="feeds">
<input type="button" onclick="selectFeed(cssfeed);" value="CSS Feed"> <input type="button" onclick="selectFeed(socialfeed);" value="Social Feed">
<!-- <h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> -->
<div id="feed">CSS:</div>
<script type="text/javascript">

var cssfeed=new gfeedrssticker("CSS", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>


<script type="text/javascript">

var socialfeed=new gfeedrssticker("Social", "example2class", 3000, "")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>


</div>
Other content after
</body>
</html>

**OMaluco** · 08-18-2010, 12:08 AM

Hi again,

The last code you posted it´s what I was looking for. Fantastic!
Thank you allot.

Another question, how can I disable the feed fetching at all, I am not saying to put them all hidden. that I have done with a button that calls the function with no reference to a feed "selectfeed()". I dont Know if it is the right way but it worked.
But the feedfetching still runs behind causing a little slowdown to the blog. If the reader doesnt want to view the feeds...they should not continue behind.

Is that possible?

Thanks again, you are very hellpful.

**jscheuer1** · 08-18-2010, 03:05 AM

If I understand the question, there's no real good way with this script. The elements needed to display each feed are written to the page as the page loads using document.write(). If you chose to only do this on demand, document.write() will overwrite the entire page.

I said "no real good way", as there's a sort of OK way. You can have each feed on a separate page. These feeds could then be shown through an iframe on the actual blog page only as requested. This is not ideal in that iframe is sort of non-standard and is being (quite slowly, mind you, but nevertheless) phased out.

However, I think you may be overestimating how much having the two feeds on the page ready to be revealed actually slows things down. The typical blog page has tons of scripts and other external resource files (like images, css, perhaps Flash and/or audio, etc.) associated with it. And the layout is often less than ideal (often involving nested tables for example which slows page loading). Removing one or two feeds isn't usually going to make all that much difference.

If you still want to go ahead with the iframe idea, I can fill in the details for you.

**OMaluco** · 08-22-2010, 09:18 PM

Hi there! Me again.

Sorry for the delay, but since your last post I was googling around to know more about the iframes and I would like to try out that solution. Remember that if possible the iframe must be autoresizable to the height of the content of the feeds. So if you please help me on this again I appreciate.

Thank you again.

Thread: How to let user choose which feed he wants to see with input button.

Thread Tools

Search Thread

How to let user choose which feed he wants to see with input button.

Bookmarks

Bookmarks

Posting Permissions