Tabs in Freeway

Hi, for those who are interested, there are a couple of Actions which should help with the building of tabbed pages in Freeway. They allow you to have a number of discreet blocks of content on one page, and use an image to switch between them.

The JavaScript overhead is small, and the code generated degrades nicely if JavaScript is not present: all your content will appear in a neat column on the page instead.

The URL with a tutorial and downloads (including a demo Freeway Pro file)? Why it’s here: [url]http://www.softpress.com/products/Fun/tabs.php[/url]

NB - this Action makes use of Layers, so it’s a Freeway Pro only affair.

quote

This looks excellent! Now if you could include the hooks to have the tabs show state — my wish-list would be complete. I would want the tab graphic to change color or whatever based on which tab was currently showing, this would also make it possible for tabs to appear to come forward and go back.

Walter

On Mar 5, 2007, at 11:17 AM, Paul wrote:

[quote:8093f968b2]Hi, for those who are interested, there are a couple of Actions which should help with the building of tabbed pages in Freeway. They allow you to have a number of discreet blocks of content on one page, and use an image to switch between them.

The JavaScript overhead is small, and the code generated degrades nicely if JavaScript is not present: all your content will appear in a neat column on the page instead.

The URL with a tutorial and downloads (including a demo Freeway Pro file)? Why it’s here: http://www.softpress.com/products/Fun/tabs.php

NB - this Action makes use of Layers, so it’s a Freeway Pro only affair.

All the best Paul Dunning Freeway 4 Pro 4.3.2 Freeway Actions - www. actionsworld.com (http://www.actionsworld.com)

www.pauldunning.com (http://www.pauldunning.com)

[/quote:8093f968b2]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

Hi, download the file. There is a Freeway File which shows how showing states can be done with a slave image.

quote

On Mar 5, 2007, at 8:17 AM, Paul wrote:

[quote:78158a66d3]The URL with a tutorial and downloads (including a demo Freeway Pro file)? [/quote:78158a66d3] Paul,

Looks great! I spotted a typo in Step Three of the tutorial:

"Make sure that this layer is the same width as the Tabs Area box, and is atl east the height."

Does this action work with Freeway 3.5.12? Thanks,

Richard

Richard Houston Architectural Art http://www.richardwhouston.com

This list is maintained by Softpress Systems - http://www.softpress.com

quote

Ah. Thanks.

Walter

On Mar 5, 2007, at 12:06 PM, Paul wrote:

[quote:0d7569b36e]Hi, download the file. There is a Freeway File which shows how showing states can be done with a slave image.

All the best Paul Dunning Freeway 4 Pro 4.3.2 Freeway Actions - www. actionsworld.com (http://www.actionsworld.com)

www.pauldunning.com (http://www.pauldunning.com)

[/quote:0d7569b36e]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

This is very cool. Had a quick look at it and wondered if one’s page will not get cluttered with tab areas easpecially if there is a bunch of other items on the page. How about an option to grab the content for the tab area from a different page.

Marcel

quote

Just tried to move the tab areas off the page to the right and it seems to still work

Marcel

quote

Nice action Paul. I hand coded something similar on the [url=http://www.iview-multimedia.com/downloads/index.php]iView download page[/url] about a year ago. Sadly the page isn’t online anymore but the idea was that when it loaded it sniffed the user’s OS and displayed the correct tab of products for their operating system. The options were Mac, Win and All. The other feature we put in was the ability to load a tab by default by passing in a query string (index.php?p=m for example for Macintosh products) in the url. I think this would make a nice addition to the action as users could create links to target specific tab content. Regards, Tim.

quote

[quote:75426e1d13=”Richard Houston”]Does this action work with Freeway 3.5.12? [/quote:75426e1d13]

No - Freeway 4 only. Freeway 4 has been out in the wild for over a year now. I doubt very much that you’ll be seeing anything new for Freeway 3.

quote

[quote:3f80479564=”Richard Houston”]Looks great! I spotted a typo in Step Three of the tutorial:

"Make sure that this layer is the same width as the Tabs Area box, and is atl east the height."[/quote:3f80479564]

Thanks - you are seeing a new "feature" in my typing skills….

quote

[quote:8b099b628d=”Helveticus”]This is very cool. Had a quick look at it and wondered if one’s page will not get cluttered with tab areas easpecially if there is a bunch of other items on the page. How about an option to grab the content for the tab area from a different page.

Marcel[/quote:8b099b628d]

Hi, you can make the page as tall as is possible in Freeway. As as your tab content items are layered, the height will be meaningless. Freeway will only build the page to the height of the non-layered item furthest from the top.

quote

[quote:ae5ea9adcc=”Tim Plumb”]Nice action Paul. I hand coded something similar on the [url=http://www.iview-multimedia.com/downloads/index.php]iView download page[/url] about a year ago. Sadly the page isn’t online anymore but the idea was that when it loaded it sniffed the user’s OS and displayed the correct tab of products for their operating system. The options were Mac, Win and All. The other feature we put in was the ability to load a tab by default by passing in a query string (index.php?p=m for example for Macintosh products) in the url. I think this would make a nice addition to the action as users could create links to target specific tab content. Regards, Tim.[/quote:ae5ea9adcc]

Hi, interesting ideas - thanks. My thoughts were that you could have a "bookmarkable" option - the tabs would then take a round trip to the server with a query passed. Phase One was to get a working mechanism to the good folk in FreewayVille fairly quickly.

The idea of having a tab showing subject to a JavaScript test would be handy as well.

quote

As the tabs will be layers, if one is quite long and another quite short, will they ‘push’ other items on the page down or overlap them?

N

quote

Hi, they will push them down if the Tabs Area item isn’t a layer itself. If it IS a layer, the usual overflow options will be there in the Actions Palette.

The size of the Tabs Area Action defines the minimum size of the tabbed area.

quote

Hi’ Is there away to use CSS in TAB action instead of javascript so it wont get broken.

" The JavaScript overhead is small, and the code generated degrades nicely if JavaScript is not present: all your content will appear in a neat column on the page instead. "

quote

[quote:66cb958cdc=”Mikhel Jaffe”]Hi’ Is there away to use CSS in TAB action instead of javascript so it wont get broken.

" The JavaScript overhead is small, and the code generated degrades nicely if JavaScript is not present: all your content will appear in a neat column on the page instead. "[/quote:66cb958cdc] Hi, somewhere along the way, you have to switch the visibility of one item off and visibility of another on when a button is clicked - for this, Javascript is needed.

quote

I was ready to agree with you Paul, and I will admit that perhaps javascript is an easier solution in some ways, but CSS is also capable of hiding and showing elements.

I’ve been tinkering with a method that uses a css pseudo class to achieve the tabbed content functionality. Here is my blog entry on the subject: [url]http://www.thebigerns.com/freeway/projects/tabbed-content-using-target-pseudo-class/[/url]

And here is an example I built completely in Freeway 4 Pro, with a sample file you can download: [url]http://www.thebigerns.com/freeway/examples/pseudo-target/index.html#download[/url]

Paul wrote: [quote:3cbf4ac350] Mikhel Jaffe wrote: [quote:3cbf4ac350]Is there away to use CSS in TAB action instead of javascript so it wont get broken.

" The JavaScript overhead is small, and the code generated degrades nicely if JavaScript is not present: all your content will appear in a neat column on the page instead. " [/quote:3cbf4ac350] somewhere along the way, you have to switch the visibility of one item off and visibility of another on when a button is clicked - for this, Javascript is needed. [/quote:3cbf4ac350]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

This list is maintained by Softpress Systems - http://www.softpress.com

quote

Hi - very interesting. Do you have any objections to me pulling this apart and wrapping it into the Tab Actions?

quote

Paul — I have no objections at all to that. I didn’t realize the Tabs actions were your babies — I’ll make sure to update its mention in my blog.

As I’ve said, I’m not sure if it will function in any flavor if IE (my testing is limited at the moment). It breaks in Mac Opera, but mac Firefox and Safari are OK. It may still need some hacks — if I’m able to refine the method further, I’ll keep my blog updated.

Paul wrote: [quote:58ec7efa5b]Hi - very interesting. Do you have any objections to me pulling this apart and wrapping it into the Tab Actions? [/quote:58ec7efa5b]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

This list is maintained by Softpress Systems - http://www.softpress.com

quote

This looks really cool. If IE will recognize it, it’s a major coup! Where did you find the :target attribute? I’ve never seen that one before.

Walter

On Mar 15, 2007, at 5:44 AM, The Big Erns wrote:

[quote:378b859354]Paul — I have no objections at all to that. I didn’t realize the Tabs actions were your babies — I’ll make sure to update its mention in my blog.

As I’ve said, I’m not sure if it will function in any flavor if IE (my testing is limited at the moment). It breaks in Mac Opera, but mac Firefox and Safari are OK. It may still need some hacks — if I’m able to refine the method further, I’ll keep my blog updated.

Paul wrote:

[quote:378b859354]Hi - very interesting. Do you have any objections to me pulling this apart and wrapping it into the Tab Actions?

[/quote:378b859354]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

Ernie Simpson Freeway 4 Pro User http://www.thebigerns.com/freeway/

[/quote:378b859354]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

[quote:3380b26921=”The Big Erns”]Paul — I have no objections at all to that. I didn’t realize the Tabs actions were your babies — I’ll make sure to update its mention in my blog.[/quote:3380b26921] They are mine when I’m wearing my Softpress Hat.

quote

Thanks my Freeway PPLE can’t wait for the new action to test it.

quote

[quote:17ac3b57e2=”waltd”]This looks really cool. If IE will recognize it, it’s a major coup! [/quote:17ac3b57e2]

Just broke out IE6 and 7 in Parallels (yes, Windows XP is just another application my Mac runs), and sadly, and as expected, it doesn’t work. Which is a real shame, as it looks and works wonderfully on a Mac.

This page shows what Microsoft supports (sctroll to the bottom). No target: [url]http://msdn.microsoft.com/workshop/author/css/overview/css_selectors_ovw.asp[/url]

:target is a CSS3 thing, so I doubt we’ll see full support for a while.

quote

Oh well. It’s back to the JavaScript mines…

Walter

On Mar 15, 2007, at 6:49 AM, Paul wrote:

[quote:38fad90912] waltd wrote: [quote:38fad90912]This looks really cool. If IE will recognize it, it’s a major coup! [/quote:38fad90912]

Just broke out IE6 and 7 in Parallels (yes, Windows XP is just another application my Mac runs), and sadly, and as expected, it doesn’t work. Which is a real shame, as it looks and works wonderfully on a Mac.

This page shows what Microsoft supports (sctroll to the bottom). No target: http://msdn.microsoft.com/workshop/author/css/overview/ css_selectors_ovw.asp

:target is a CSS3 thing, so I doubt we’ll see full support for a while.

All the best Paul Dunning Freeway 4 Pro 4.3.2 Freeway Actions - www. actionsworld.com (http://www.actionsworld.com)

www.pauldunning.com (http://www.pauldunning.com)

[/quote:38fad90912]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

Ah such a shame. Was really lookin forward to a css version of the tab action.

Off topic question Paul, is there any way to make the iframe action have an attribute to color the cut out hole it makes.

Waltd I’m posting the page link in a little bit.

quote

[quote:feddcf2004=”Mikhel Jaffe”]Ah such a shame. Was really lookin forward to a css version of the tab action.

Off topic question Paul, is there any way to make the iframe action have an attribute to color the cut out hole it makes.

Waltd I’m posting the page link in a little bit.[/quote:feddcf2004]

Does the background colour in the Inspector Palette not do this for you?

quote

I think he was referring to the content of the iframe, over which he may or may not have control.

Walter

On Mar 15, 2007, at 10:39 AM, Paul wrote:

[quote:48baf6476b] Mikhel Jaffe wrote: [quote:48baf6476b]Ah such a shame. Was really lookin forward to a css version of the tab action.

Off topic question Paul, is there any way to make the iframe action have an attribute to color the cut out hole it makes.

Waltd I’m posting the page link in a little bit. [/quote:48baf6476b]

Does the background colour in the Inspector Palette not do this for you?

All the best Paul Dunning Freeway 4 Pro 4.3.2 Freeway Actions - www. actionsworld.com (http://www.actionsworld.com)

www.pauldunning.com (http://www.pauldunning.com)

[/quote:48baf6476b]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

Hi ,

can’t you do the same thing with iframe? without having the compatibilty problem with java? what is the difference?

Best Regards

Ulf

quote

Ulf, iFrame is not valid XHTML Strict. If you’re worried about making a CSS version of the tabs, that might also bother you.

In addition, JavaScript is also turned off by corporate I.S. fiat in a surprising number of places, particularly in known security-compromised browsers (like any version of IE/Win). A pure CSS solution (if it would run on non-Standard browsers like IE) could get around that problem neatly. Alas, it appears to not be possible.

Walter

On Mar 15, 2007, at 11:15 AM, ulfr wrote:

[quote:9de1a95cbe]Hi ,

can’t you do the same thing with iframe? without having the compatibilty problem with java? what is the difference?

Best Regards

Ulf

Ulf

[/quote:9de1a95cbe]

This list is maintained by Softpress Systems - http://www.softpress.com

quote

I’ve been getting these flash of white on this iframe page http://www.christosdovas.com/Product/product.html click on bags, hats. Jackets or waist- dressing to see the problem. The background in the info palette is set to black for iframe.

Thanks

quote

I guess I never learn :-(

Anyone who beats their head up against link states is bound to learn a little bit about pseudo classes and pseudo objects. Not long ago, Tim titillated me with the :nth-child() pseudo class modifier — which isn’t even supported by Safari yet. Needless to say I was smitten with ideas of things that these special modifiers might allow.

The :target modifier is built on a simple and well known concept of using an anchor identifier (#) in a URI to target a spot on the page. So, like :hover allows you to create an appearance for elements when they interact with the cursor, :target lets you create a style that is only used when that element interacts with the URI identifier. Or at least, that’s how I translate the ancient W3C manuscripts: [url]http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#target-pseudo[/url]

Thanks to everyone for checking it out. Someday, my dreams will come true. ;-)

waltd wrote: [quote:eee915eed5]This looks really cool. If IE will recognize it, it’s a major coup! Where did you find the :target attribute? I’ve never seen that one before. [/quote:eee915eed5]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

This list is maintained by Softpress Systems - http://www.softpress.com

quote

If you want to have tabs in multiple levels, iframes and perhaps Paul’s action must be the answer, or?

Ulf

quote

Hi, I haven’t tried this, but I’m guessing here that you may be able to do this with multiple instances of the tab Actions.

quote

I’ve tried now - it seems not to be possible at the moment.

quote

[quote:f9e4d928a4=”Paul”]I’ve tried now - it seems not to be possible at the moment.[/quote:f9e4d928a4] It is possible — with iframes ands your tab action, I love iframes! If I only could get them to be transparent in IE6.

Ulf

quote

A thought crossed my mind while browsing this thread…..then it passed and I felt better.

Seriously though, and I know this isn’t exactly ideal, but has anyone tried combining the show/hide functionality with the CSS tabs idea, or is there a problem with text links? Seems like a logical compromise.

quote