Question

I have a <div> with the CSS rule margin: 0 auto; and I’m using MooTools to slide it when necessary.

It seems that the mere instantiation of an Fx.Slide object removes the margin on my element. That is, whereas the element used to be centered inside its parent, it is now left-aligned. Just this line alone seems to do this:

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

I can counteract this effect by doing something like this:

var slide = new Fx.Slide('mydiv');
$('mydiv').setStyle('margin', '0 auto');

But this is crude and I certainly don’t want to have to do this every time I come across this situation. And even more so, I want to know, why does MooTools remove the margin in the first place? Is there an option I don’t know about, some parameter I’ve neglected? Please let me know, as I’m new to MooTools. While I’m quickly finding that its applications are far and above those of jQuery (at least for my purposes), I’m finding that its documentation is much less verbose than its syntax.

Answer 1

From Fx.Slide.js:

Fx.Slide = new Class({

    /* .. */

    initialize: function(element, options){
        this.addEvent('complete', function(){
            this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0);
            if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper);
        }, true);
        this.element = this.subject = document.id(element);
        this.parent(options);
        var wrapper = this.element.retrieve('wrapper');
        this.wrapper = wrapper || new Element('div', {
            styles: $extend(this.element.getStyles('margin', 'position'), {overflow: 'hidden'})
        }).wraps(this.element);
        this.element.store('wrapper', this.wrapper).setStyle('margin', 0);
        this.now = [];
        this.open = true;
    },

    /* .. */

As you can see, Fx.Slide takes the element (this.element) you apply to it, wraps it in a wrapper div (this.wrapper) with overflow: hidden and the margin and position of the element and then removes the margin of the element.

So removing the margin is by design. What I do not understand is why the margin is not transferred to the wrapper. You might have some CSS modifying plain DIVs in the parent element that is using !important and is preventing Fx.Slide from transferring the properties properly.

Are you using MooTools 1.2.3 with the latest version of MooTools More (1.2.3.1)?

Also, for Fx.Slide to work properly, your page needs to be in standards mode. Do you have an XHTML or HTML (Strict Or Transitional) doctype as the first thing in your markup? (No XML prolog). Worst case, if it still doesn’t work, use the following:

$('mydiv').getParent().setStyle('margin', '0 auto');

MooTools is great JavaScript framework to work with and I personally feel that it is way more powerful than jQuery (excluding the fact that jQuery has a huge community). Unfortunately, the More package (which is the equivalent of jQuery’s plugins) consistency is somewhat lacking in some aspects.