Results 1 to 10 of 10

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

  1. #1
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 08-16-2010 at 08:28 PM. Reason: minor code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-16-2010 at 10:24 PM. Reason: add alternative
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...

  6. #6
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •