jQuery and margin: 0 auto

Question

So, this is a problem that's been asked before, but I'm hoping we can lay it to rest: I'm using jQuery 1.4. If I define the style

#obj { margin: 0 auto; }

and then do

$('#obj').css('marginLeft');

the result is the computed value in pixels. Is there any way to tell whether those pixels come from the auto calculation or not, without parsing document.styleSheets?

Answer 1

You can't get the auto from the element itself, because styles are cascading, what if you had this?

#obj { margin: 0 auto; }
div #obj { margin: 0 10px; }

Which is it? Depends on the page and how it cascades, the basic concept is you're getting the calculated style properties on that element, what's in the stylesheet doesn't matter, there could be 20 stylesheets, etc.

Basically it boils down to this: getting auto vs 000px is a really rare request and would required a lot of extra code to figure out, so much so that it's an easy case of "no, this doesn't belong in core". However, there are plugins to do CSS parsing.

Short answer: jQuery core cannot (doesn't have code to) do this, jQuery with plugins, or just JavaScript in general yes you can.

Answer 2

This solution would also be triggered if the margins were set to percentages, but it might be good enough for your purposes. Basically, you record which margins change on resize. So you'd record the margins before resize to an array:

var aMargins = [];
$('.yourObjs').each(function(i,obj){
  var objML = $(obj).css('marginLeft');
  aMargins.push(objML);
});

Then resize the window, see which margins changed (these will be either 'auto' or %), do what you need to do to them and return he window to original size:

var wW = $(window).width();
var wH = $(window).height();  
window.resizeTo(wW - 5, wH);
$('.yourObjs').each(function(i,obj){
  if ($(obj).css('marginLeft') != aMargins[i]) {
    // your centering code here
  }
}
window.resizeTo(wW,wH);

If your centering code just adjusts the left margin then this should work fine for % based margins too. I can't test this code or provide an example because I'm on the road and writing from my phone, but hopefully this works or helps you come up with something that will.