Yes, you can build this with Freeway. You will need to do some mucking around in the Extended sub-dialog of the Edit Style dialog, but it can be done entirely in Freeway.
The thing you need to understand is that Freeway exposes some of the tools you will need, but not all of them. Some of the attributes you will set to create this style are, as a result, hidden in the design view, and only can be appreciated in the Preview mode or when viewing the page in a browser.
To start, set up your tabs as headers, intermingled with the inline content elements you want them to show and hide. Draw a single HTML box, large (especially tall) enough to hold all of your possible content elements, and name it ‘tabarea’ using the Title field in the Item Inspector. Double-click into that box and add your first tab text. Type a return at the end of the line, then triple-click in the tab text to highlight the entire line of tab text. Set the style to H3 (never mind at all what this looks like for now). Press the right arrow and from the main menu, choose Insert / Table. Set the rows/columns as you need for your content. Drag the width out to fill the width of your outer HTML box. Now double-click in the outer HTML box, press the right arrow a bunch of times, the then type your second tab, and style it as you did the first. Again, with the flashing text cursor at the end of the box, choose Insert / HTML Item. Repeat as necessary. (My point here is that it is possible to intermix Headers, HTML boxes and Table elements inline.)
Now, if you have applied the Protaculous code to the page, you need to allow for the possibility that the element following the H3 will be something other than a DIV. In the “tabbed” example, I used this code:
var tabarea = $('tabarea');
var tabholder = new Element('div',{id:'tabholder'});
tabarea.insert({top:tabholder});
var tabs = tabarea.select('h3');
var targets = [];
tabs.each(function(elm){
elm._target = elm.next('div').hide();
targets.push(elm._target);
elm.observe('click',function(evt){
targets.invoke('hide');
tabs.invoke('removeClassName','active');
elm.addClassName('active')._target.show();
});
});
tabs.each(function(elm){
tabholder.insert(elm.remove());
});
tabs.first().addClassName('active');
targets.first().show();
This line:
elm._target = elm.next('div').hide();
…sets up the effect to only work with an inline DIV following each header. While you could work around this by using Insert / HTML item to “wrap” your tables in DIV elements (insert a DIV, then double-click inside that inline DIV and insert a table into it) this is easily adjusted in the JavaScript. Simply make the line read:
elm._target = elm.next('div,table').hide();
This will let the effect work whether the following element is a div or a table.
Now at this point, you should have a functional (but probably ugly) example of the effect you wanted. The next part comes through applying CSS style to the tabs.
The script inserts an inline DIV (with the id ‘tabholder’) at the top of your ‘tabarea’ DIV, and moves the tab headers into that box when the page loads. So your styles need to be centered around the children of the #tabholder element.
I used this style:
<style type="text/css">
#tabholder h3 {
display: inline-block;
cursor: pointer;
padding: 3px 12px;
margin: 0;
margin-right: 6px;
background-color: #b5b5b5;
border-top: 1px solid #9e9e9e;
border-left: 1px solid #9e9e9e;
border-right: 1px solid #9e9e9e;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#tabholder h3.active {
background-color: #fff;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
#tabholder {
height: auto !important;
border-bottom: 1px solid #9e9e9e;
}
</style>
…which I simply wrote long-hand in a text editor and added into Freeway through the Page / HTML Markup dialog. Another way to attack this would be to add the attributes that Freeway doesn’t provide direct interface elements for. Stepping through the lines of code, the first rule is for the H3 children of the #tabholder element (the tabs). The first line (display: inline-block) sets the h3 elements to act like inline elements, rather than reserving the entire line to themselves as normal. The next line makes the cursor appear as if the tab was a link. The third line sets the tab to have some physical size (padding expands out from the box formed by the characters of text, without this, the tabs would be only as large as their text). The next two lines set up the margin on the tabs and the space between tabs. Then a background color is added to the box, and a border around the top, left, and right sides. Finally, the rest of the attributes set the rounded top corners.
All of these attributes except the background-color would need to be added through the Extended sub-dialog, as none of them have any analog in the Freeway interface.
The next rule sets the visual feedback for the currently active tab. The rule is again scoped to only the h3 elements in the #tabholder. All we’re changing is the background color and adding a white rule at the bottom of the active tab (to match the background color of the exposed tab). The negative margin shifts this tab down by 1px so its white bottom border will cover the gray bottom border of the #tabholder. This gives the effect of the tab “breaking” that rule, so it looks connected to the visual element below it.
Finally, the last rule sets a bottom border of the #tabholder element, and ensures that this element has no defined height, so it will “shrink-wrap” around the H3 elements inside it.
All right, so that gets you the visual look of my /tabbed/ example. If you wanted to match the exact look of the Christie example, you would need to use a fair bit more CSS. If you were only targeting IE 10 and Safari, Firefox, and Chrome, you could use CSS3 gradient backgrounds to make the outer bar. You could also just use a background image, tiled horizontally, to be more backward-compatible. That would be applied to the #tabholder element. Next, you would use the border-radius attribute to create the rounded corners (with all the fallbacks for older browsers) and you would allow IE < 9 to degrade gracefully to square corners. Some padding on #tabholder would create the margin for the tabs. Then, your #tabholder h3 would be inline-block again, but would have border-radius and padding to create the dimensions, and #tabholder h3.active would have the dark background color and white color. Off the top of my head, it would look something like this:
<style type="text/css">
#tabholder h3 {
display: inline-block;
cursor: pointer;
padding: 8px;
margin: 0;
margin-right: 6px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}
#tabholder h3.active {
background-color: #333;
color: #fff;
}
#tabholder {
height: auto !important;
padding: 8px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
background: url(Resources/gradient.jpeg) repeat-x;
}
</style>
That would probably get you there.
Now I realize that this is mostly hand-coded CSS and JavaScript, not at all a part of the usual visual design process, so it would depend on your definition of “can’t be done in Freeway” whether you consider this to be a useful answer.
Walter
On Apr 9, 2012, at 6:41 AM, Michael Coldereo wrote:
Can I make something as clean as on this site in the middle you can see Overview, Specs, Accessories etc. http://www.christiedigital.com/en-us/product-support/discontinued-products/pages/christie-lx380-digital-projector.aspx
Those are tabs that work perfect, it shows you where you are as it changes the colour and the hover works nice.
I know believe this is almost impossible with FW, I tried basically everything.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options