Reid Burke’s Scrolling TabView

By Eric MiragliaMay 20th, 2008

Reid Burke of IdeaRefuge writes in with a new YUI implementation that tweaks the standard “stacked” spatial orientation of a tab control and replaces with a scrolling orientation (either horizontal or vertical). In his own words:

I’ve created a YUI addon, ScrollTabView, that allows you to transition
between TabView content with a Scroll animation.

This allows you to use YUI’s tabs to create an effect similar to:

You can specify your own direction (horizontal or vertical), animation
duration, and easing as attributes. Complicated styles are all applied
automatically — just use it like a normal TabView.

View examples of ScrollTabView in action and grab the code here.

Direct links to examples and code:

It’s all available under a BSD License — so feel free to use it for
your own projects!

Reid’s work builds on top of Matt Sweeney’s YUI TabView Control and Animation Utility.

5 Comments

  1. Thomas said:
    May 21, 2008 at 6:03 am

    Very nice idea!

    It is possible to get width and height from DOM
    like this..?

    hhh = document.getElementById(“canvas”).offsetheight;

    www = document.getElementById(“canvas”).offsetwidth;

    ScrollTabView(‘canvas’, { width: www, height: hhh, direction: ‘horizontal’ });

    Many thanks,
    Thomas

  2. YUI: ScrollTabView Makes Tabbed Views Even Better said:
    May 21, 2008 at 2:25 pm

    [...] Update: I’ve been featured on the official YUI Blog! [...]

  3. Reid Burke said:
    May 22, 2008 at 8:18 am

    Thomas,

    That should be possible. This initial version focuses on letting ScrollTabView handle the styling instead of relying on other CSS.

    That’s something I’d like to improve on– being able to detect the styles if you don’t specify them. Until then, your workaround should work. Just make sure you use offsetHeight and offsetWidth, not offsetheight and offsetwidth.

    -Reid

  4. YUI Addons Trac Now Live said:
    May 22, 2008 at 2:44 pm

    [...] received a great response from the community about my ScrollTabView addon. I’d like to thank all of the visitors and [...]

  5. R.Seiji » links for 2008-05-23 said:
    May 23, 2008 at 1:31 pm

    [...] Reid Burke’s Scrolling TabView » Yahoo! User Interface Blog Nice tab navigation effects (tags: interface:concepts interface:ajax) [...]