[Pro] How to do this?

Hi Walt

Makes a bit more sense (still learning and the terminology is sinking in)
When using Protaculous it’s easy enough when using text only but is it possible to use graphic elements as well with text between the tab changes or is it text only between tabs.

Stephen


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

You can put anything you like between the headers, as long as it’s inline content. The key to this layout working correctly is to have everything you want to have “tabbed” contained in one tall (and flexible-height) HTML box Then the entire contents of that box are re-jigged to form the tabs. So if you have an image that you want to appear in one of the tabs, you would double-click into the spot where you want it to appear (so you have a flashing text cursor) and then choose Insert / Graphic Item from the main menu. In the 100px box that appears, you would import your picture, then resize and crop the image as desired. You could set that image to float left or right in order to have the other text flow around it, or you could leave it as default where it would completely interrupt the text flow.

Walter

On Feb 13, 2012, at 12:53 AM, Bonsai Bart wrote:

Hi Walt

Makes a bit more sense (still learning and the terminology is sinking in)
When using Protaculous it’s easy enough when using text only but is it possible to use graphic elements as well with text between the tab changes or is it text only between tabs.

Stephen


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

Hi Walt

Would it be possible do use protaculous for tabs like these Streaming - ZEEBOX obviously without the twitter feeds etc just the tab section with the line at the bottom of the tab the content width

Cheers
Stephen


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

Sure. It’s just a matter of CSS to style the tabs. The basic layout that I put in the aforelinked Gist will do the job as far as functionality.

The style is a bit more complex, though. I had to do a lot of fiddling with the elements drawn in Freeway as well as the script from the Gist, so it’s best if you download the example document here:

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

Be sure to click on each element, look in the Extended dialog, look at the styles in the Styles palette; nothing is “stock”. All the Protaculous code is in the top Function Body editor.

Walter

On Feb 19, 2012, at 12:04 PM, Bonsai Bart wrote:

Hi Walt

Would it be possible do use protaculous for tabs like these Streaming - ZEEBOX obviously without the twitter feeds etc just the tab section with the line at the bottom of the tab the content width

Cheers
Stephen


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

Cheers Walter

It had me a bit confused. Thanks for the help.

Stephen


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

Hi Walter,

Really very impressive!

One minor thought, how to adjust the script if I want a constant width for the tabs?
(easy if images are used, of course).

bw, Omar KN


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

Just adjust the CSS style that creates the tabs, and give it an explicit width or min-width property. So in the tabStyle attribute, just slip in at the beginning…

min-width: 120px;

and experiment with that property value. Remember, the tabs also have padding set left and right, so the width you set here will be added to that if you’re measuring in Photoshop how much room you have.

Walter

On Feb 23, 2012, at 3:20 PM, OmarKN wrote:

Hi Walter,

Really very impressive!

One minor thought, how to adjust the script if I want a constant width for the tabs?
(easy if images are used, of course).

bw, Omar KN


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

Well, I set the style like this:

var tabStyle = ‘min-width: 76px; background-color:#F7F7EF’;

but nothing much is happening?!

Is this not correct?

bw, Omar KN


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

Aha. You also need to look a couple of lines down, where I have display:inline and change that to display:inline-block. This will cascade further to screw up the positioning of the tabs with respect to the box they’re “attached” to. You’ll need to change this line as well:

var bar = new Element('ul',{style:'list-style-type:none;padding:0 0 4px;margin:-30px 0 0 -9px;'});

to read

var bar = new Element('ul',{style:'list-style-type:none;padding:0 0 4px;margin:-35px 0 0 -9px;'});

to bring them back together. (That’s assuming you were starting from my example document called DaveTabs.)

If you want to center the text in the tabs, also add text-align:center; to your tabStyle string.

Walter

On Feb 24, 2012, at 12:05 PM, OmarKN wrote:

Well, I set the style like this:

var tabStyle = ‘min-width: 76px; background-color:#F7F7EF’;

but nothing much is happening?!

Is this not correct?

bw, Omar KN


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

Got that, thank you!

Now there are only two small things left:

1.) space:

When creating the 4 or 5 “tab areas or boxes” which are about each 300 to 600 px high, the working space in the FRW document is therefore about 4 * 600 = about 2000px high:

This makes it difficult if not impossible to have other layers further down on the page, because I can’t access the space where to put it, it’s covered by the “tab area or box.”

How could one access the area beneath?

bw, Omar KN


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

The best way would be to create an inline layout, where your other elements would be even further down the page, but would collapse to whatever vertical offset was appropriate for the currently-visible tab. The whole point of this exercise is to make your page appear like a really tall page if a visitor has JavaScript disabled, and to collapse into a neat tabbed layout if they have it enabled (most do, but notably, Google does not).

Walter

On Feb 24, 2012, at 4:42 PM, OmarKN wrote:

Got that, thank you!

Now there are only two small things left:

1.) space:

When creating the 4 or 5 “tab areas or boxes” which are about each 300 to 600 px high, the working space in the FRW document is therefore about 4 * 600 = about 2000px high:

This makes it difficult if not impossible to have other layers further down on the page, because I can’t access the space where to put it, it’s covered by the “tab area or box.”

How could one access the area beneath?

bw, Omar KN


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

The other problem I’m struggling is the:

2.) h3 size

This size is processed too small, seems to be inherited from somewhere?? (my BODY font-size is 12 px)

In Pageview it’s ok, in Preview too small.

So I changed from h3 to an h2 (16px color), but still the same: the font is equally too small, only the color is ok.

Should I set a definition (as HTML Markup) like:

div#tabsholder h3 { font-size … } ?

That’s my question, please…

bw, OmarKN


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

Yes, you can set a size that way, but look down a few more lines where it’s set in ems and either set it there, or erase it where it’s set in ems and set it in pixels where you suggested. I’m working on another example, much less confusingly written. The problem with this example was that I took a sample that sorta worked and kludged it until it worked in one specific document, but I didn’t take the time to abstract out the exact choices that have to be made for it to work everywhere. As a result, there are elements being set in different places, different measurement styles (ems and px and maybe %) and it’s all very confusing to grasp. The actual principle is extremely simple, or should be if I’ve done my job correctly.

Walter

On Feb 25, 2012, at 3:42 AM, OmarKN wrote:

The other problem I’m struggling is the:

2.) h3 size

This size is processed too small, seems to be inherited from somewhere?? (my BODY font-size is 12 px)

In Pageview it’s ok, in Preview too small.

So I changed from h3 to an h2 (16px color), but still the same: the font is equally too small, only the color is ok.

Should I set a definition (as HTML Markup) like:

div#tabsholder h3 { font-size … } ?

That’s my question, please…

bw, OmarKN


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

Ok, i changed the em to 1.2em that’ll do!

The actual principle is extremely simple

Yes … (if you say so! :slight_smile:

Btw, as expected I had to add an extra padding to the surrounding layer for IE 9 on WinPC, about the height of the tabs.

Thanks,

Bw, Omar

/ Omar

::: Communication to improve civilisation :::

s_ip

On 25 feb 2012, at 19:57, Walter Lee Davis email@hidden wrote:

look down a few more lines where it’s set in ems and either set it there,


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