on Javascript Tabbed Content

For a recent project, I had several topics that were broken down into similar subsections (i.e. Topic 1 had sections, a, b, and c; Topic 2 also had sections a, b, and c). I could have had three pages for each topic, but section c was very short – just an image and a couple of lines of text. I didn’t like the look of the layout with such a short page, but I also wanted a way for people to navigate directly to section c. Rather than linking to anchors (which I’ve always thought feel a little disorienting, not to mention their inaccuracy when near the bottom of the page), I decided to look for a way to put the content in Javascript driven Firefox style tabs.

It took quite a bit of looking around and testing different tabbed interfaces, I settled on Coda-Slider by Niall Doherty. The Javascript uses the jQuery library, so I was excited to use it as an opportunity to play around with it (having mainly relied on the MooTools library in the past).

You can see the demo here.

Things I liked about Coda-Slider (and why I chose it over other Javascript tabs):

  1. It degrades gracefully.
  2. It loads quickly. Some of the other tabs I looked at degraded gracefully by only loading a style sheet if Javascript was enabled. Coda-Slider uses Javascript to alter the classes/ids of objects. The benefit that I noticed is I don’t get the appear-then-change jumpiness that degradable Javascript is prone to. This works because the style sheet is already loaded and cached in the browser and all that happens at run-time is the class/id changes, rather than loading another external stylesheet.
  3. It’s not too bloated (though I trimmed it down quite a bit).
  4. It allows for directly linking to a specific tab by changing the hash in the URL.

One thing that Coda-Slider didn’t do that I wanted it to do was re-size the window depending on the size of the content- which was a great opportunity for me to get down and dirty with jQuery.

First, I created an array to hold the different panel heights. I used jQuery to find all of the divs with id=”panel” (all those that contained my content), and for each of them, determine the height and push that height into my array:

// Create array of panel heights, set from CSS...
var panelHeights = [];
container.find("div.panel").each(function(){ panelHeights.push($(this).height())});

Then I had to make sure that the height was automatically set to the first tab that was open. Coda-Slider has code in it to determine which panel is showing, so I used that to find the right height in my array (remembering of course that Javascript arrays start with 0, so I subtracted 1 from the current panel number):

// Set initial height
container.css("height" , panelHeights[cPanel - 1]);

And last, I animated the change in height so it would match the sliding in of the new content:

jQuery(this).parent().parent().parent().parent().find("div.stripViewer").animate({ height: curHeight}, settings.easeTime, settings.easeFunc);

You can take a look at all the sourcecode here: http://zbrustudios.com/demo/adjustable-height-tabs/

Another note: Coda-Slider was equipped with a bunch of code I didn’t need, so I stripped that out. Also, I changed the code to work with jQuery Easing Plugin 1.3 without the compatibility script that Coda-Slider needed.

All in all, I was very impressed with the jQuery library. It’s really easy to use and understand. It may be that I’m far wiser now than when I first learned to use MooTools, but syntax of jQuery seems easier to read.

April 18, 2009 • Posted in: thoughts

One Response to “on Javascript Tabbed Content”

  1. Dirnov - April 20, 2009

    Hi there,
    I have already seen it somethere…
    Thank you
    Dirnov

Leave a Reply