views:

436

answers:

1

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.

+2  A: 

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.

Andrew Moore
I'm using both of those versions, yes. Just downloaded them a couple of hours ago.My page is HTML 5 (just <!DOCTYPE html>) but I just switched it to XHTML Transitional just to see the result and it's still the same result.
Josh Leitzel
Do you have some CSS affecting plain DIV's in the parent element?
Andrew Moore
The parent div is also 0 auto, and the parent of that div is body, whose margin I have set to 0. This doesn't seem to be affecting it, though, because I just removed that declaration and nothing changed. Unless I'm understanding the constructor wrong, doesn't it explicitly tell the wrapper to have no margin? Why, as you asked, isn't the margin transferred?
Josh Leitzel
+1 for a good answer and for promoting MooTools. :D I love mootools too, and think it is a far more capable library than jQuery.
jrista
@blueballoon: The code sample from mootools tries to copy the margin and position from the element your trying to slide to the wrapper, then sets the margin of the wrapped element to 0 after storing it inside the wrapper.
jrista
**@blueballon:** No, it sets the target element to no margin, but the wrapper to the original margin of the target.
Andrew Moore
Okay, but why isn't that working as expected here?
Josh Leitzel
I created a full-page example so you can easily see what's going on: http://pastebin.com/f18f3c2c2 (obviously you need to change the .js file references to wherever yours are located).
Josh Leitzel