Tabs

Freeway
21

Hope you don’t mind me cutting in a bit here.

I’ve been trying to create ‘tabs’ like the hadrians wall example in Nathans original message.
Are ‘tabs’ such as those achievable within freeway in a graphical way without recourse to javascript i.e using actions and layers?
The sections or items connected to the tabs I am setting up are to contain carousels and I’d prefer to be able to do it in a more graphic way.

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

22

You can certainly make something with Target Show/Hide layer, where the layers contain Carousel instances, and show one of them at a time. It gets very fussy with the settings of “Sticky, Toggle, whatever” in the various Actions, but it can be done. What you need to be especially mindful of when you start stacking effects like this, though, is total page size. Turn on Show Page Sizes in your site pane, and keep an eye on the number reported each time you publish that page. You can subtract about 150K from the total, because the files served in production will not be as large (Prototype and Scriptaculous are served from Google’s CDN, and they are served in a compressed format that strips them down to about 100K all in) but all the photos and other content that you place in the individual carousel panes will be counted toward your page total, and those elements all have to load into the browser before the page will work correctly.

Walter

On Nov 17, 2011, at 9:28 AM, tonzodehoo wrote:

Hope you don’t mind me cutting in a bit here.

I’ve been trying to create ‘tabs’ like the hadrians wall example in Nathans original message.
Are ‘tabs’ such as those achievable within freeway in a graphical way without recourse to javascript i.e using actions and layers?
The sections or items connected to the tabs I am setting up are to contain carousels and I’d prefer to be able to do it in a more graphic way.

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

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

23

Thanks Walter! I am going to have to try this.

Frank H.
On Nov 17, 2011, at 5:40 AM, Walter Lee Davis wrote:

My tabs are dynamically generated. Try turning off JavaScript in your browser, and you’ll see what I start out with. It’s just one very tall running HTML box, and the tabs are H2 tags inside that box. Each H2 is followed by a nested DIV containing all of the related content, and it’s this nested DIV that is turned on and off to make the effect.

When the page loads, a new container DIV is created by JavaScript to hold all of the tabs, each of the H2 tags is scooped up and moved into it, and before that move, each one is linked (programmatically) with the DIV that follows it. So even though the page elements are completely re-arranged, the browser maintains that connection, and if you click on the K, the DIV containing all the K words (which used to follow that K in source order) is revealed.

I agree that if you were building this with the usual methods in Freeway (Target Show/Hide and friends) you would go mad very very quickly.

Walter

On Nov 17, 2011, at 3:38 AM, Frank H wrote:

Walter,

If you don’t mind, how do you keep order with so many tabs? I am playing with about 5-6 on a site, and it’s a mess on the template.

Frank H.

On Nov 16, 2011, at 7:19 PM, Walter Lee Davis wrote:

And here’s another more elaborate example:

http://walterdavisstudio.com/liff/index.html

Walter

On Nov 16, 2011, at 11:19 AM, Walter Lee Davis wrote:

Tom Waits FTW!

On Nov 16, 2011, at 11:10 AM, BigG wrote:

p.s. Downtown Train’s a cracking tune!

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

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

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

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

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

24

I agree that if you were building this with the usual methods in Freeway (Target Show/Hide and friends) you would go mad very very quickly.

I am maybe teetering on the edge with this! Not being conversant with the intricasies of Javascript, and having come to enjoy the relative simplicity of Freeway’s graphical layout, I am wondering what method will do least harm to my sanity!

I was maybe going to even try to incorporate rollovers on the carousel tabs into this madness! I had previously tried to get to the bottom of this on an earlier thread:
http://freewaytalk.net/thread/view/99110#m_99300

The sprites that Walter had guided me towards were a bit of a challenge. It appears that one way or another I will have to get my hands a bit dirty trying to get things to work the way I’d like which is a bit more coding than I am used to.

Any further guidance or examples would be much appreciated!

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

25

Well I’ve been trying to get into the javascript for the tabbed example that Walter had set up.
I noticed in the code copied into the Protaculous action mentions a ‘tabholder’. Is this something I need to specify somewhere?

I tried basically copying Walters example into another file and changed what needed to be, checked the style fo the h3 header but when I preview my file then the tabs are not horizontally arranged but vertically aligned one above the other.

Not sure what bit of the magic I’m missing from this, to go from the tall html box with inline elements to the simple three tabbed example of Walters.

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

26

Cracked it! Sorry about that last entry!

Its good to work something out. I realised I’d not done the page markup.

We move on.

Thanks walter for all your input.

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