Question

I am trying to create a sidebar for a site that will allow a user to select an item from a drop down menu and show an RSS Feed. The feed will change depending on which item is selected from the list. I am not sure how to acomplish this, but my first thought was to use z-index and show/hide layers. I have one layer and the menu set up, but it will not allow me to change the feed displayed when a different menu item is selected. Does anyone know how I can acomplish this?

I have a live preview up of what I have gotten done so far. It’s located on the site, CHUD,

Answer 1

you have two options:

1. pre-load all the rss feeds (i’m assuming your <ul>‘s in your example page are the HTML output of your RSS feeds?), hide them all when your document loads, and then reveal them as selected

2. use AJAX to dynamically grab the selected feed information as your select box changes.

here’s a quick example of a javascript and jQuery version of doing the former:

html:

<select id='showRss'>    <option name='feed1'>Feed 1</option>    <option name='feed2'>Feed 2</option> </select>  <div id='rssContainer'>    <ul id='feed1'>       <li>feed item 1</li>       <li>...</li>    </ul>    <ul id='feed2'>       <li>feed item 2</li>       <li>...</li>    </ul>    <!-- etc... --> </div> 

javascript:

var rss = document.getElementById('rssContainer'); // main container var nodes = rss.getElementsByTagName('ul');        // collection of ul nodes var select = document.getElementById('showRss');   // your select box  function hideAll()  {                              // hide all ul's     for (i = 0; i < nodes.length; ++i)  {         nodes[i].style.display = 'none';     } }  select.onchange = function()    {                  // use the 'name' of each     hideAll();                                     // option as the id of the ul     var e = this[this.selectedIndex].getAttribute('name');     var show = document.getElementById(e);         // to show when selected     show.style.display = 'block'; }  hideAll(); 

jQuery:

$('#showRss').change(function() {     $('#rssContainer ul').hide('slow');            // added a bit of animation     var e = '#' + $(':selected', $(this)).attr('name');     $(e).show('slow');                             // while we change the feed });  $('#rssContainer ul').hide(); 

to do option 2, your onchange function would handle the AJAX loading. if you’re not that familiar with AJAX, and have a few feeds, option 1 is probably the easiest. (again, i’m assuming you have already parsed out your RSS as HTML, as that’s another topic altogether).