Reid Burke’s Scrolling TabView

May 20, 2008 at 8:17 pm by Eric Miraglia | In Development | 5 Comments

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

5 Comments »

RSS feed for comments on this post. TrackBack URI

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

    Comment by Thomas — May 21, 2008 #

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

    Pingback by YUI: ScrollTabView Makes Tabbed Views Even Better — May 21, 2008 #

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

    Comment by Reid Burke — May 22, 2008 #

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

    Pingback by YUI Addons Trac Now Live — May 22, 2008 #

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

    Pingback by R.Seiji » links for 2008-05-23 — May 23, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2009 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.