Create a dropdown menu that changes page content using Show / Hide Layers and Z-Index
I am trying to create a sidebar for a site that will allow the user to select an item from a dropdown menu and show an RSS feed. The channel will change depending on which item is selected from the list. I'm not sure how to do this, but I thought I should use z-index and show / hide layers. I have one layer and a menu set up, but that won't allow me to change the feed shown when another menu item is selected. Does anyone know how I can internalize this?
I have a preview of what I have done so far. It is located on the site, CHUD ,
source to share
you have two options:
-
preload all rss feeds (I'm assuming yours
<ul>
on your example page is the HTML output of your rss feeds?) hide them all when your document loads and then expand them as selected -
use AJAX to dynamically grab selected feed information when your select box changes.
here's a quick example of a javascript and jQuery version to accomplish 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 function onchange
will handle the AJAX loading. if you are new to AJAX and have multiple channels, option 1 is probably the easiest. (again, I'll assume you've already parsed your RSS as HTML, just like this other topic).
source to share
This uses jQuery and jFeed plugin to replace DIV content based on dropdown.
// 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>
source to share