Creating a Drop Down Menu That Changes Page Content Using Show/Hide Layers and Z-Index

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

This uses jQuery and jFeed plugin to replace the contents of a DIV based on a dropdown selection.

// load first feed on document load
$(document).ready(
    function() {
       load_feed( $('select#feedSelect')[0], 'feedDiv' ) ); // pick first
    }
);

function load_feed( ctl, contentArea )  // load based on select
{
   var content = $('#' + contentArea )[0]; //pick first

   content.html( 'Loading feed, please wait...' );

   var feedUrl = ctl.options[ctl.selectedIndex].value;

   $.getFeed( { url: feedUrl,
        function(feed) {
           content.html( '' );
           content.append( '<h1>' + feed.title + '</h1>' );
           feed.items.each( 
              function(i,item) {
                  content.append( '<h2><a href="'
                                     + item.link
                                     + '">' 
                                     + feed.title
                                     + '</a></h2>' );
                  content.append( '<p>' + feed.description + '</p>' );
              }
           );
         }
     });
 }

HTML

<div>
   <select id=feedSelect onchange="load_feed(this,'feedDiv');" >
      <option value='url-to-first-feed' text='First Feed' selected=true />
      <option value='url-to-second-feed' text='Second Feed' />
      ...
   </select>
   <div id='feedDiv'>
   </div>
</div>

Answer 2

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

Answer 3

It's not exactly the same thing, but this uses simple CSS and HTML and no Javascript needed. A bit of reverse engineering can go a long way.

Image_switcher

it's in dutch, but it's simple: move your mouse over the <a> parts and the image switches.

Pure CSS+HTML, no Javascript