Search code examples
javascriptmootools

Change the direction of Mootools slide toggle?

I am working on a project which is using Mootools. I unfortunately do not have the option to introduce jQuery into the project due to the projects complexities and have fallen on hard times trying to get a simple animation how I want it.

I am using the slide toggle function which defaults to sliding in and out of the left hand side of the element. I would like the slide to work the other direction - sliding in and out from the right hand side.

Unfortunately, the documentation doesn't mention anything to do with this and it looks like no one has asked the question before on any forums.

Here is my HTML:

<div id="app">
    <div id="appcontent" style="margin: 0px;">
        <a id="closebutton" href="#">Close</a>Content Here
    </div>
</div>

And here is my Mootools javascript:

var slide = new Fx.Slide('app');

$('closebutton').addEvent('click', function(event)
{
event.stop();
slide.toggle('horizontal');
});

Does anybody have any ideas of how I can get around this?

Many thanks in advance.

G.

Solution

  • The reason it slides to top/left is simply a practical one - sliding out to the right might cause some adverse side effects with parent containers automatically growing to accomodate the content, thus interfering with the rest of the page or triggering unwanted scrollbars.

    Also, Fx.Slide is kind of obsolete these days since its functionality has been obsoleted by CSS3 Transitions module, which is now widely supported.

    Here's a sample on how to alternatively implement this with CSS3 transitions and just a minor bit of Javascript. If you remove the overflow:hidden on the body you'll see exactly why sliding out to the right creates more problems than to the left.