[Pro] How to do this?

Freeway
1

Hi all,

I am sure this is easy to do but can’t remember how to make them or what they are called (can’t find it under “tabs”)

In this page:
http://www.staples.ca/ENG/Catalog/cat_sku.asp?CatIds=66%2C2977%2C3389,3383&webid=35943&affixedcode=WW

Under the picture, the sections (to me they are tabs):
“Product Details”, “Customer Reviews”

Thanks for any help in advance.

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

2

There’s an Action by Pau Dunning to do tabs, and there’s a way to do
them with Prototype with my Protaculous Action and a little custom CSS.

Here’s the Protaculous recipe, which has some advantages over the
Action from a search engine optimization perspective.

Draw a layered or inline HTML box on your page where you want the tabs
to appear. Make sure it is wide enough to hold all of the tab headings
in one row, and it can be any height to begin with. Write down the
exact (case-sensitive) name that Freeway assigned to the box, which
you will find in the Title field of the Inspector while that box is
selected. (You may also change the name using the Inspector to
something more memorable if you like.)

Double-click inside the HTML box and type your first tab heading text
(entirely unstyled), then press return. Type the text you wish to have
visible when that tab is selected (also unstyled).

  • If you want to add photos to the tab, you will do so as inline
    images, so follow the normal technique for inserting an image in a run
    of text, and floating it left or right if you want the text to flow
    around it.

  • You may have multiple paragraphs of text if you like. At the end of
    the first tab’s content, press Return, and enter your next tab header
    text followed by another return, and then the text for that tab.

Repeat until you have all of your tabs and their content in a single
column. Go back over the tab headers, triple- or quadruple-click each
one in turn to highlight the entire line of text plus the hidden
return character at the end of the line, and press the H3 button in
the Styles palette to set the tab text as a “heading level 3” tag. Do
this for each of the headers. If you want to apply different styling
to the paragraph text following each header, you can do so now.

Click elsewhere on the page, then click once on your HTML box
containing the tab content. In the Inspector, locate the Height
property for that box, and click on the little up/down arrow icon left
of the field. The field will gray back, indicating that it is disabled.

Apply the Protaculous Action to your page (find that at ActionsForge).
Set the Library picker to prototype-packed. Click on the top Function
Body button and paste in the following code:

While the code editing window is still open, make the following
adjustments to the code to match your layout:

  • yourHTMLBox should be changed to whatever name you used for your
    HTML box.
  • tabStyle and tabSelected should be changed to whatever CSS color you
    want for your tabs and the highlighted tabs. You can get these color
    values from the Edit Color dialog in Freeway.
  • If you wanted to change the h3 tag to a different header level, you
    could change the line that begins ‘var tabs = …’ to reflect that.
    (Leave this alone if you’re following these directions verbatim.)

Now preview the page in Freeway or a browser. You should see a row of
tabs along the top of where the HTML box was, the first tab should be
a gray-yellow color, and the subsequent tabs should be light gray, and
the first tab’s content should be visible. When you click on any of
the other headers, their respective tab content will appear, and the
highlight will shift to indicate the currently selected tab.

The beauty of this approach is that when Google comes along,
everything will be visible as a nice semantic set of headers and
paragraphs. To Google (and other search engines) that’s all that
matters. My friend Beverly will have an easy time with her screen
reader software, too. Rather than having to connect the dots between a
bunch of visually-styled elements that have no semantic connection
between them.

Let me know how this works out for you!

Walter

On Aug 14, 2011, at 11:36 AM, kitesurfer3 wrote:

Hi all,

I am sure this is easy to do but can’t remember how to make them or
what they are called (can’t find it under “tabs”)

In this page:
http://www.staples.ca/ENG/Catalog/cat_sku.asp?CatIds=66%2C2977%2C3389,3383&webid=35943&affixedcode=WW

Under the picture, the sections (to me they are tabs):
“Product Details”, “Customer Reviews”

Thanks for any help in advance.

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

3

Cannot see a picture on that page

Nathan Garner

email@hidden
http://www.austinwellsdesign.co.uk

Member of NAPP | Zen Affiliate | Dorset Business Member | YEC

Facebook | Twitter | LinkedIn

On 14 Aug 2011, at 16:36, kitesurfer3 wrote:

Hi all,

I am sure this is easy to do but can’t remember how to make them or what they are called (can’t find it under “tabs”)

In this page:
http://www.staples.ca/ENG/Catalog/cat_sku.asp?CatIds=66%2C2977%2C3389,3383&webid=35943&affixedcode=WW

Under the picture, the sections (to me they are tabs):
“Product Details”, “Customer Reviews”

Thanks for any help in advance.

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

4

Thanks Walter, I got it to work, but I have a question:

How can I make the “Titles” stay on top of the box, pretty much like the “quote all” is in top of the “Message” in this reply area I am writing on.

Thanks again,
Emilio

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

5

I was wondering the same thing, so I fiddled with it a bit after I
posted my answer. Here’s a new Gist that does just that:

The major difference between this approach and my first one is that
instead of just whacking the heads into the top of the box and setting
them to inline so they sit side by side, I create a list (UL) at the
top of the box and insert each head inside a list item (LI) tag. Then
some style (and a lot of fiddling with relative sizes) later, the tabs
are pulled above the box using negative margins. The tabs are still
inside the box, but they appear to sit on top of it.

If you use my code exactly, then be sure to set your box containing
all of the tab content to have Border:1px and Padding:8px. If you
choose a different set of values for those styles, you’ll have to
fiddle with the math inside the function.

Walter

On Aug 14, 2011, at 3:22 PM, kitesurfer3 wrote:

Thanks Walter, I got it to work, but I have a question:

How can I make the “Titles” stay on top of the box, pretty much like
the “quote all” is in top of the “Message” in this reply area I am
writing on.

Thanks again,
Emilio

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

6

Example here:

http://scripty.walterdavisstudio.com/tabs2

Freeway file here:

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

Walter

On Aug 14, 2011, at 4:09 PM, Walter Lee Davis wrote:

I was wondering the same thing, so I fiddled with it a bit after I
posted my answer. Here’s a new Gist that does just that:

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

7

Thanks again Walter, I like your solution because is very simple, clean and Google friendly.

In my case it works better if I “custom” the padding to Top=0

You are the best!

Now if you could convince the Freeway programmers to hide or minimize the “Actions” like the do the “Inspector” (so annoying) when “Previewing” a page you would be my hero!

I won’t hold my breath.

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

8

Shift-command-H will hide all the palettes, and show them again when
you type it again. I have two screens, and keep the palettes mostly on
the second screen, so I guess it doesn’t bother me that much.

If you find this helpful, consider using one of those keystroke
expander utilities to make a combination shortcut for “Shift-Command-
H;Option-Command-P” and use that to enter/leave Preview mode. I’m not
sure you can combine two shortcuts in the Apple control panel, but you
could try that first before investing in a third-party utility.

Walter

On Aug 14, 2011, at 5:00 PM, kitesurfer3 wrote:

Thanks again Walter, I like your solution because is very simple,
clean and Google friendly.

In my case it works better if I “custom” the padding to Top=0

You are the best!

Now if you could convince the Freeway programmers to hide or
minimize the “Actions” like the do the “Inspector” (so annoying)
when “Previewing” a page you would be my hero!

I won’t hold my breath.

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

9

I see, I am always working on Macbook and is really annoying, I realize with external or large monitor it does not happens.

I don’t use Freeway all the time otherwise trust me I would have done something about it like you mention, it just strike as weird that they will minimize “Inspector” but they refuse to do the same for “Actions”

Thanks again!

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

10

hi all

If I want to add a background image for the tabs instead of the color whats the best way

regards

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

11

Which tabs? Are you using CSS Menus or Carousel or the Protaculous tab “recipe” or Paul Dunning’s Tab Area Action?

Walter

On Feb 11, 2012, at 9:36 AM, Bonsai Bart wrote:

hi all

If I want to add a background image for the tabs instead of the color whats the best way

regards

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

12

Hi Walt

What I would like to do is use Protaculous tab on the page and use a background image for the tab selected and have a fixed width for the tabs. Similar instyle to Live Roulette - Get Exclusive Live Roulette Online Bonuses Here! with images also included in the element that is changed

Regards

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

13

In what way would the “active” tab be differentiated from the rest of the tabs? I came up with a very easy way to do this that uses a 24-bit PNG for the button image and a background color change to do the active differentiation. You could also use a 24-bit PNG for the button and two different background images for the normal state and the active state.

So you draw a graphic box and apply the Carousel Tab Action to it. In the Output tab of the inspector, you change the output mode to PNG-Millions. In this box, you create only the type or icon or whatever you are using to differentiate one tab from another. Critically, you do not add any background color to this image. It’s like writing on glass.

Next, you use the Style palette to make the two styles you need to have the tabs work. If you were writing these long-hand in a CSS editor, they would look like this:

.controls img {
	background-color: #ff9;
}

.controls img.active {
	background-color: #666;
}

And you would have pale yellow tabs with one dark gray. You don’t have to only change the background color, you could use a background image, borders, etc. It’s just a matter of picking a pair of changes that are different enough, but still work with the foreground transparent image. If you’re handy with Photoshop, you can make a semi-transparent PNG that includes shading or highlights along with the text, and the difference in background combined with that foreground image can make the button look dramatically different.

To create these styles in the Styles palette, you need to create Tag-only styles. Choose New Style from the cog menu, click into the Tag field, and then enter exactly the selector of the style as above (.controls img, for example). Tab into the Name field, remove whatever automatic name Freeway inserted, and then tab back out to ensure that the lack of name is saved. Use the Character picker to choose background options, use the Extended dialog to add anything fancy or special, and save the style. You don’t have to (and shouldn’t) apply it to anything. Styles that have a tag but no name are saved to every page by default.

Let me know if this helps in your quest!

Walter

On Feb 11, 2012, at 10:31 AM, Bonsai Bart wrote:

Hi Walt

What I would like to do is use Protaculous tab on the page and use a background image for the tab selected and have a fixed width for the tabs. Similar instyle to http://www.livecasinos.co.uk/live-roulette/ with images also included in the element that is changed

Regards

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

So are we talking of creating a carousel effect or protaculous (bit confused now) would I be able to design a inline protaculous example and for the tabs just create graphic effects with the carousel tab action applied

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

15

This is all with vanilla Carousel Tab. You don’t need to add Protaculous hand-code to this, just a little more CSS and a careful approach to creating your tab images.

Walter

On Feb 11, 2012, at 12:08 PM, Bonsai Bart wrote:

So are we talking of creating a carousel effect or protaculous (bit confused now) would I be able to design a inline protaculous example and for the tabs just create graphic effects with the carousel tab action applied

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

16

I’ve already got carousel working on this page with active tab etc. So what were talking about is a active carousel effect with the same idea as using the active state.

So I would create a graphic box and assign action carousel tab - what would I call the extended in div

In styles create

.controls background-image (url/resources/new.png)

.controls active background-image(url/resources/active.png)

Create content as would for carousel and give action as carousel and assign carousel tab to relevant carousel pane

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

17

On Feb 11, 2012, at 12:39 PM, Bonsai Bart wrote:

I’ve already got carousel working on this page with active tab etc. So what were talking about is a active carousel effect with the same idea as using the active state.

You want the tab that has the active class to look different than the other tabs, correct?

So I would create a graphic box and assign action carousel tab - what would I call the extended in div

In styles create

.controls background-image (url/resources/new.png)

.controls active background-image(url/resources/active.png)

.controls img { background-image: url(Resources/new.png) }
.controls img.active { background-image: url(Resources/active.png) }

Walter

Create content as would for carousel and give action as carousel and assign carousel tab to relevant carousel pane

Once you’ve set up these styles, all you have to do is use the Actions as normal, draw clear PNG boxes for the tabs (with graphic text in them) and you’re all set. It won’t look like much of anything in the design view, but in preview or a browser you’ll see the entire effect.

Walter

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

18

Thanks Walter

For a rollover effect would that be on the .controls img.hover

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

19

No, if you want to do that, don’t use the Rollover Action, and make your style .controls img:hover (note the colon rather than the dot). But IE won’t see that, since it doesn’t understand :hover on anything that isn’t an A tag. I think IE9 understands it, but nothing less than that does.

Walter

On Feb 11, 2012, at 12:58 PM, Bonsai Bart wrote:

Thanks Walter

For a rollover effect would that be on the .controls img.hover

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

I just re-read the entire thread on the Web (my previous answers were from Mail.app) and I just caught on to what you were really asking. If you want to change the Protaculous script above to use background images rather than background colors, all you need to do is alter these two lines:

var tabStyle = 'background-color:#ccc';
var tabSelected = 'background-color:#dd9';

so they read

var tabStyle = 'background-image:url(Resources/tab.gif)';
var tabSelected = 'background-image:url(Resources/tab_selected.gif)';

and you should be all set. Naturally, these need to be real paths to real images on your server.

Walter

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