Hey everyone,



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:

  - Yahoo! Widgets Homepage: http://widgets.yahoo.com/

  - Panic's Coda: http://panic.com/coda/

  - Mozilla's Firefox 3 pre-release start page:

http://en-us.www.mozilla.com/en-US/firefox/3.0rc1/firstrun/



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:

http://reidburke.com/yui/



Direct links to examples and code:

http://internal.reidburke.com/yui-addons/yodeler/widget/ScrollTabView.js

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/horizont\

al.html

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/vertical\

.html

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/easing.h\

tml

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/quick.ht\

ml



It's all available under a BSD License-- so feel free to use it for

your own projects!



Bug reports and comments are very welcome!

Hello Reid,



cool idea! I will try to implement it to my website in the near future

(first I have to get familiar with tabview:) It reminds me of the

"Carousel" widget which should appear in the next YUI versions, that I

am of course looking forward to.



I don't see so much sense in the vertical animation with tabs at the

moment but I could imagine something different. You have a viewport

and behind it there is a huge document, so with vertical and

horizontal tab-like controls along the X- and Y-axis you can position

your viewport (crosslines would be the correct metaphor) wherever you

want to see the part of the document... In computer games you do it

with this little worldview window.



Cheers, Klaudiusz





--- In ydn-javascript@yahoogroups.com, "Reid Burke" <me@...> wrote:

>

> Hey everyone,

>

> 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:

>  - Yahoo! Widgets Homepage: http://widgets.yahoo.com/

>  - Panic's Coda: http://panic.com/coda/

>  - Mozilla's Firefox 3 pre-release start page:

> http://en-us.www.mozilla.com/en-US/firefox/3.0rc1/firstrun/

>

> 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:

> http://reidburke.com/yui/

>

> Direct links to examples and code:

> http://internal.reidburke.com/yui-addons/yodeler/widget/ScrollTabView.js

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/horizont\

al.html

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/vertical\

.html

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/easing.h\

tml

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/quick.ht\

ml

>

> It's all available under a BSD License-- so feel free to use it for

> your own projects!

>

> Bug reports and comments are very welcome!

>

--- In ydn-javascript@yahoogroups.com, "Klaudiusz Szatanik" <racl@...>

wrote:

>

> Hello Reid,

>

> cool idea! I will try to implement it to my website in the near future

> (first I have to get familiar with tabview:) It reminds me of the

> "Carousel" widget which should appear in the next YUI versions, that I

> am of course looking forward to.



Thank you.



I haven't heard of Carousel until now. At first look it appears very

similar, but you have to specify your own CSS files. ScrollTabView

does this for you.



I hope to make ScrollTabView able to use some kind of predefined CSS

like Carousel. Currently in IE6 the tab content flickers when the page

loads because ScrollTabView hasn't finished setting up the styles.



It's something to think about-- so thanks for letting me know about

the similar application!



You could make ScrollTabView behave like Carousel by adding your own

previous and next buttons and switching to the next tab by setting

activeTab and getting the right index using getTabIndex, etc. Hiding

the yui-navset tabs would make it even closer.



>

> I don't see so much sense in the vertical animation with tabs at the

> moment but I could imagine something different. You have a viewport

> and behind it there is a huge document, so with vertical and

> horizontal tab-like controls along the X- and Y-axis you can position

> your viewport (crosslines would be the correct metaphor) wherever you

> want to see the part of the document... In computer games you do it

> with this little worldview window.

>



If you get that working, let me know :) You could potentially style

the yui-navset tabs to be placed to the right of the yui-content area...



> Cheers, Klaudiusz

>

>

> --- In ydn-javascript@yahoogroups.com, "Reid Burke" <me@> wrote:

> >

> > Hey everyone,

> >

> > 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:

> >  - Yahoo! Widgets Homepage: http://widgets.yahoo.com/

> >  - Panic's Coda: http://panic.com/coda/

> >  - Mozilla's Firefox 3 pre-release start page:

> > http://en-us.www.mozilla.com/en-US/firefox/3.0rc1/firstrun/

> >

> > 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:

> > http://reidburke.com/yui/

> >

> > Direct links to examples and code:

> >

http://internal.reidburke.com/yui-addons/yodeler/widget/ScrollTabView.js

> >

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/horizont\

al.html

> >

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/vertical\

.html

> >

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/easing.h\

tml

> >

>

http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/quick.ht\

ml

> >

> > It's all available under a BSD License-- so feel free to use it for

> > your own projects!

> >

> > Bug reports and comments are very welcome!

> >

>



--Reid