Example from Walter http://www.deltadzine.net/ttt.zip
Instructions:
This page must be laid out with the CSS button On, and everything you draw (that you want to be a part of this effect) must be a layer. If you didn’t have the CSS Layout button on, go back through your layout and check the Layer checkbox in the inspector for each element of the effect.
There is a layer drawn where the panes will appear. Each of the panes is a positioned child of that layer. There are a couple of ways to do this. The hardest would be to draw them in place, the easiest would be to draw your panes wherever you like, then use the Site panel to nest them later. For clarity, I’m referring to the layer drawn where you want the panes to appear as the main layer. This layer must have Overflow set to hidden (which is not default).
Make sure Show Items is on and the disclosure triangle next to your page name is pointing down, or (shortcut) click on the header of the Site panel and it will toggle to show all of the elements of the current page.
Select one of the panes in the site panel (it will highlight in the design view so you can see what you’ve clicked on) and then drag it (within the site panel) until it is beneath and to the right of the main layer. Let go, and the pane should become a child of the main layer. (It will appear indented in the list below that main layer.) Repeat for each of your panes. Now would also be a good time to name these panes something memorable. Using the Inspector, set the top and left values of each pane as follows: left = 0, top = 0 + height of any of the other panes above it. When you’re done, you should have all of your panes visible, one directly above the other.
Adjust the height of your main layer so that all of your panes are visible. (Multiply the height of one pane by the number of panes and set that as the height of the main layer.)
There’s a function defined in the Page > HTML Markup which resets the position of the trigger elements and the panes. This is where we start with the math part of this exercise.
<script type="text/javascript">
function resetAll(){
$('shell').childElements().each(function(elm){
if(elm.positionedOffset().left == 0)
new Effect.Move(elm,{x:-700,y:0, duration:0.7});
});
$$('div.tab').each(function(elm){
if(elm.positionedOffset().left > 55)
new Effect.Move(elm,{x:-20,y:1,duration:0.4});
elm.setOpacity(0.5);
});
}
</script>
The number 700 above is arrived at because it’s much wider than the panes. You could use something that’s just one pixel more than the width of your panes, so in my example, I could have used 371. I may go back and change my example later and see if it makes it any better. But whatever you choose for this number, make sure that you make note of it, because you have to use it again later.
The number 55 above is the left position of the trigger elements (in my example, the colored blocks on the sushi board, in the TTT original, the application icons). You will see this position in the Inspector when you have one of them selected. In order to use this code, you must make these trigger elements all start at the same left position. You could certainly re-write it to support a different layout, but I leave that as an exercise…
The numbers 20 and 1 above refer to the move that the trigger element makes when it’s clicked. We’ll refer to these again later. These values were arrived at by trial and error, and make the trigger appear to move in a straight line relative to the grain of the sushi board. You will want to adjust these to fit your layout and your desired animation.
So with your code adjusted to match the real layout you drew, you can close the Page > HTML Markup dialog and move on.
Next, apply Protaculous Action to the page. (There’s a copy in the ttt.zip archive linked from the demo above.) Select either scriptaculous-packed or scriptaculous from the Library picker. Click the top Function Body button and add the following code:
$('shell').childElements().each(function(elm){
if(elm.positionedOffset().left == 0)
elm.style.top = '0px';
elm.style.left = '-700px';
});
$('shell').style.height = '332px';
Remember where I said you would need 700 again? Here’s where it goes. Two more things you need to figure out. First, I named my main layer ‘shell’ using the Title field of the Inspector. Click on your main layer, and see what it’s called (change it to something memorable) and replace shell above with your layer’s ID. Also, where I have 332, change that to the height of one of your panes.
What this code does (and it fires before the page is visible, that’s why it’s in the top function, not the bottom one) is gather up all of your panes and set them to a known X/Y location relative to their parent. Because the parent has Overflow set to Hidden, the panes disappear from the page. Then we set the height of the main layer so that the page won’t appear taller than its contents. The reason we do all this with JavaScript is so that anyone who comes to your site with JavaScript turned off will see ALL of your content at once. They won’t see a big nothing, as they would if you set all of this position business with CSS.
The final layer of the cake is to make the individual triggers work. This part is done with the Observer Action (part of Protaculous).
Select the first trigger element, and apply Observer to it. In the first Event field, add the word click. Click on the Function Body button and add the following code:
if($('red').positionedOffset().left == -700){
resetAll();
new Effect.Move('red',{x:700,y:0, duration:0.7});
new Effect.Move(this,{x:20, y:-1, duration:0.4});
this.setOpacity(0.99);
}
Now we are referring to a bunch of previous code. ‘red’ refers to the ID of the pane that we want to move. 700, again that’s how far to move the pane to the right — change that in both its negative and positive forms. And 20 and -1 are the move of the trigger element. Adjust all to fit your layout and desired animation.
One last thing you must do to the trigger is to apply a classname to it. Freeway doesn’t make this easy, you will need to use the Extended dialog for this. With the trigger element selected, choose Item > Extended from the main menu. Click on the < div > segment of the dialog, then click new, and enter
class
tab
in the Name and Value fields, respectively. While you’re in there, you can move over to the < div:style > segment and add
cursor
pointer
so the “finger” will appear when you hover over the trigger.
Now repeat for each of the trigger elements, adjusting the name of your desired target in the script as you do.
Preview in a browser, and see what (if anything) happens. The very best way to start debugging this (if it doesn’t work out of the box) is to use Firefox with the FireBug extension installed. This will give you line-level error reports and point out what’s gone wrong. As with anything JavaScript related, the actual error will probably result from a typo or case-sensitivity error. Every detail matters in this sort of thing! If you can’t figure it out, then post a link to your page on a public server, and one of us will probably be able to help.
It is critical that you set your Publish preferences to More Readable if you want help, otherwise you will just be making more business for my wife, the eye doctor.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options