There are a lot of effects in script.aculo.us that have not (yet) been
wrapped up in a neat FX bow. You can use anything you like through the
Protaculous Action, but you’ll have to get your hands a little dirty
writing (or copy/pasting) the code.
To make something grow up rather than down, you have to manipulate two
properties at once. (This is because there is nothing in CSS
positioning to say “place the bottom of this box this far away from
the top of the screen”.)
The script.aculo.us Effect.Morph can be used to change an element from
one set of styles to another. So what you would need to do is when the
page loads, set your menu element to have 0 height and a top position
equal to its current top plus its height. Then you would listen for
the click event on your trigger element and use Morph to change the
height and the top at the same time.
Here’s a quick example. Apply Protaculous to the page, and choose
scriptaculous-packed from the library picker.
Draw an HTML box on the page, position it at 50px from the top of the
screen, and make it 200px tall. Give it a background color so you can
see it. Change the name of the box to box1 in the Inspector.
Draw another element on the page to use as your trigger. Give it a
color and name it box2.
Click on the pasteboard, and then click on the top Function Body
button in the Actions palette. Paste in this code:
$('box1').setStyle({top:'250px',height:0,overflow:'hidden'}).hide();
Okay that dialog, then click on the bottom Function Body button. Paste
in this code:
$('box2').observe('click',function(evt){
$('box1').morph('top:50px; height:'200px');
});
Now preview your page. The first box should be completely hidden when
the page loads. When you click on the second box, the first box should
slide up out of nothing into existence.
If you’ve positioned your second box at the base of the first, then
you will have the same effect you saw in the Audi page.
The next trick will be to get the accordion menu to appear within the
first box, which is a cut and paste effort on your part.
The final trick will be to wire the first box to grow upward whenever
its height changes, and that’s going to take a bit more work (and
math) to work out. If I get a moment later I’ll try to post something
on those lines.
With those three things covered, you will have duplicated the effect
(and learned something about JavaScript animation, too).
Walter
On Jan 26, 2010, at 11:14 AM, Mr worm wrote:
I am aware of Weaver’s suiteFX = ‘sweet effects’ action suite,
which is a modernization of the ideas behind the previous ‘Mootools
Suite’, mainly for compatibility with Softpress’ choice of Prototype
and Scriptaculous.
Following on from this, my issue currently resides with the
TRANSITION FX action in this suite…
Is it possible to ‘Invert’ this effect, in other words make it
expand upwards rather than it’s default downward direction.
I want to create this Moo effect on my new site http://www.audi.co.uk/new-cars/a6/rs-6-saloon.html
If there was no compatibility issue I would be able to achieve this
in FW. But as the software permits, I am trying a work around using
the transition effect instead of a ‘Moo Accordion’.
Question: Can the Transition FX action be made to collapse various
sections on ‘mouse over’ as the Moo accordion does? I can’t seem to
get this to work. If anyone has any suggestions I’d really
appreciate them on a solution or possible work around.
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