Tabs

Freeway
1

My client has asked for the following on the her new website… she would like to use Tabs in a similar way to this page.

http://www.macsadventure.com/hadrians-wall-walk/overview.php

You can see them being used for ‘Overview’ ‘Itinerary’ ‘FAQs’ etc.

I goes this is being driven from the back-end, but is there a way to do it from the front end (in FW) bearing in mind that each tab is a different length.

Nathan

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

2

These particular tabs are not the usual way that tabs are used. Think of these as merely tab-shaped navigation icons, nothing more. If you want to copy this exactly, then all you need to do is make some tab-shaped graphic boxes, or use the CSS3 Corners Action to do the same to some HTML boxes.

The traditional way to use tabs in a page is to split a long block of text or content into more manageable chunks. All the content is loaded into a single page, and only a portion of tit is shown at one time. Switching from one tab to another is instantaneous, and does not require a page reload. I use this technique to break up long forms and other multi-stage content.

Example of the latter here: All-In

Walter

On Nov 3, 2011, at 12:57 PM, BigG wrote:

My client has asked for the following on the her new website… she would like to use Tabs in a similar way to this page.

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

3

Hi Walter

If the first tab is 100px deep and the 2nd is 1500px deep would the initial page load be 1500px deep? i.e. lots of unwanted white space at the bottom of the page?

Nathan

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

4

you simply make an inline layout for that part of your page, and set the height of the page elements to indeterminate (click on the up/down arrow icon left of the Height field in the Inspector). The elements will shrink to the height of their content automatically.

Take a look at my example again. I just made the middle tab a whole lot taller than all the rest.

Walter

On Nov 3, 2011, at 1:18 PM, BigG wrote:

Hi Walter

If the first tab is 100px deep and the 2nd is 1500px deep would the initial page load be 1500px deep? i.e. lots of unwanted white space at the bottom of the page?

Nathan

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

5

You legend! I was worried it would be a right pain!

Thanks Walter - saved the day again!

Nathan

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

6

So sorry Walter - my mind is blank! Night time here in uk! I don’t suppose you have a FW doc I can peek at to make these tabs work do you?

Nathan (humble and tired!)

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

7

Here you go:

http://scripty.walterdavisstudio.com/tabs2/tabs.freeway.zip

Walter

On Nov 15, 2011, at 3:18 PM, BigG wrote:

So sorry Walter - my mind is blank! Night time here in uk! I don’t suppose you have a FW doc I can peek at to make these tabs work do you?

Nathan (humble and tired!)

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

8

Hi Walter,

Is there a way to include tables in the tab content?

Marco

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

9

Thank you Walter - I’ve slotted that into the page - really appreciate it. Thanks

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

10

I am using a list inside the tabs and it pushes the text out to the right by the same amount as the indent.

I do like the indent as it breaks up the text nicely. But how can I bring it in from the right hand side?

Nathan

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

11

ooh also just noticed if I use a 2 lists then the text between the lists is missing.

Is there anyway to fix this?

Nathan

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

12

Walter, trying to duplicate this, how do you get twice “#carrier” in your CSS?

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

13

I can’t recall off-hand, but you can make as many styles with the same name as you like. CSS does not require you to have a single rule for each selector. I am certain I was either using the Tag-only Style technique to make these rules, or I just typed them manually in the Before /HEAD for that page.

Walter

On Nov 16, 2011, at 5:54 AM, b8 wrote:

Walter, trying to duplicate this, how do you get twice “#carrier” in your CSS?

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

14

Here’s another attempt to clarify this technique. This is ripped from a current project (hand-coded in Rails) but it’s pretty simple to add to Freeway. Note carefully that the outer box where the tabs are defined is named tabarea. This is a hard-coded dependency of the CSS and JavaScript. As written, you can only have one tab area on any given page. This could be re-written to support multiple tabbed areas on the same page, but that was not a requirement of my page, and anyway I feel it is a bridge too far.

http://scripty.walterdavisstudio.com/tabbed

http://scripty.walterdavisstudio.com/tabbed/tabbed.freeway.zip

Walter

On Nov 16, 2011, at 5:54 AM, b8 wrote:

Walter, trying to duplicate this, how do you get twice “#carrier” in your CSS?

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

15

Cool! Thanks Walter!

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

16

And another cool! from me too Walter.

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

Nathan

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

17

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

18

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

19

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

20

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