caboose

I recently came into a wealth of "squirrel photos":http://thesaq.com/pics I'd like to showcase. What I wanted was something like notebook tabs in a widget set. I didn't want *ALL* of them to be visible at once; I wanted little tab-like links to show specific squirrel photos. I figured I'd leverage some "scriptaculous effects":http://wiki.script.aculo.us/scriptaculous/search/?page%5Bname%5D=Effects to make the showing/hiding of my squirrel photos cooler looking. As a result I ended up using the new "selector functionality":http://dev.rubyonrails.org/changeset/3432 that "madrobby":http://mir.aculo.us/articles/2006/01/18/prototype-gets-selector-magic commented on recently. I also got a little bit of insight into "Scriptaculous Effects Queues":http://wiki.script.aculo.us/scriptaculous/show/EffectQueues. h3. The Markup Basically I have three different little photo sets I want to display. Each is going to be an unordered list with the dom id attribute set. I'm going to hide two of them in the markup via css with the intention of showing them later via some js magic.

  

    December 17th | 
    December 24th | 
    January 23rd
  
  

    

  
  

    

    

  
  

    

  

h3. The Jabbascript! Instead of specifying the names of each dom id, it'd be much easier to specify only the dom id we want shown while hiding the rest if need be. This is where the selectors and effects queues come into play. First the selector function($$) is going to retrieve every unordered list in the 'squirrels' div. It's then going to call a anonymous function(kinda like a block) on each element it retrieved. All we have to do after that is compare dom ids and act accordingly. Also note the queue keyword in the calls to Effect, the new element we want to show gets the queue 'end' key. This is going to process the Effect.Appear call last, ensuring that everything else will be hidden before it is shown.

function show_menu_tab(named) {
  $$('div#squirrels ul').each(function(ul) {
    if(ul.id == named) {
      if(!Element.visible(ul)) {
        new Effect.Appear(ul, {duration: 0.6, queue:'end'});
      }
    } else {
      if(Element.visible(ul)) {
        new Effect.Fade(ul, {duration: 0.6, queue:'front'});
      }
    }
  });
  return false;
}

We can now easily add more links to this list, and rest easy knowing that javascript is going to do the grunt work. Obviously a real world implementation is going to vary, but an approach like this can save you a bit of time if you want similar effects. h3. Outro I tried to simplify this as much as possible for the sake of the "example":http://www.atmos.org/pages/selector and for the sake of the squirrels. AFAIK this is borked on FF < 1.5 and IE. :)