Unobtrusive Tabs with Prototype and CSS

Here’s a demo of my tab area technique.

http://scripty.walterdavisstudio.com/how-to-tab/

I haven’t made a Freeway example yet, but the style and script are extremely well commented, so I’m hoping that those of you who have been following my earlier examples will be able to adapt this directly.

I have pulled all of the style code out of the JavaScript, which was very confusing at best, and probably not very performant, either. Everything in this example hinges around a single classname, added to the parent element (tabbed) and then the choice of a single header tag (h2) to become the tabs. The content is laid out in one tall box as if it was a layer cake, with H2 as the frosting and [anything besides h2] as the cake.

The result is that if you approach the page with JavaScript turned off (as Google does), you will see a page that makes a lot of sense, semantically speaking, and everything will be visible. When you use a scripted browser, you will get a markedly shorter page with the tab controls.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nicely done Walter very clean and easy to adapt for WebYep
all the best max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options