5

Hi I'm trying position new dom element same as old one, and then hide old one so new would replace it: http://jsfiddle.net/jC33F/5/

Though if original element has margin:auto jQuery can't retrieve it. Is there a way to be able to determine if element has margin:auto; ?

Edit: Thanks to @Vibhu I came up with this http://jsfiddle.net/jC33F/43/ looks horrible :D And I'm not sure it will always work.

Feel free to suggest something better.

grisevg
  • 250
  • 3
  • 18

4 Answers4

2

This might be crazy, but what about something like this for checking it an element has margin: 0 auto (cannot seem to find any other way):

var margin = $("#parent").css("margin");
if($('#parent').position().left*2 == ($('#parent').parent().innerWidth() - $('#parent').outerWidth())) {
  margin = "0px auto";
}

$("#positionable").css({
    position: $("#parent").css("position"),
    top: $("#parent").css("top"),
    left: $("#parent").css("left"),
    margin: margin
});
$("#parent").hide();

This code basically checks if the left value of #parent is equal to half the space between the 2 edges of its container. Worked for me in this case, might fail in other cases.

VNO
  • 3,645
  • 1
  • 16
  • 25
  • I came up with this http://jsfiddle.net/jC33F/31/ looks horrible :D And I'm not sure it will always work. – grisevg Sep 06 '11 at 21:46
0

I didn't like any of these solutions. Checking the actual stylesheet is a solution. Another solution I came up with is to store the left/right values, temporarily change the left value and see if the right value still matches. If not, then it is set to auto.

var mLeft = el.css('margin-left');
var mRight = el.css('margin-Right');
el.css('margin-left',(parseInt(mLeft)-2)+'px');
var mRightChanged = el.css('margin-Right');
if (mRight != mRightChanged) {
    console.log('read element left/right margins as auto');
    el.css('margin-left','auto');
} else {
    console.log('read element left/right margins as their value');
    el.css('margin-left',mLeft);
}

Note, this solution is just for left/right margins.

fanfavorite
  • 5,128
  • 1
  • 31
  • 58
0

Try it with position absolute for #positionable

$("#positionable").css({
    position: 'absolute',
    top: $("#parent").position().top,
    left: $("#parent").position().left,
    margin: $("#parent").css("margin"),
});
Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
  • If original(#parent) element was centered, I want to make #positionable element centered too. It's impossible with position:absolute; – grisevg Sep 06 '11 at 21:01
  • 1
    not impossible. you could set the left value to 50% and then set a margin-left value equal to half the width of the element – b_dubb Nov 12 '13 at 18:04
0

Check if the returned margin is empty would work I guess

Be aware though, that if you do not set any margin property, this will still set #positionable margin property to auto

http://jsfiddle.net/jC33F/22/

EDIT:

I found this jQuery plugin that claims it can return the margin property from an element

http://www.bramstein.com/projects/jsizes/

Kemal Fadillah
  • 9,760
  • 3
  • 45
  • 63
  • looks like 'margin' is not supported. Though 'marginLeft' is '0px' for both margin:0px; and margin:auto; – grisevg Sep 06 '11 at 21:10
  • @grisevg Right. Sorry about that, I forgot. Anyways, take a look at my edited post please. – Kemal Fadillah Sep 06 '11 at 21:16
  • Confidering your fiddle example - http://jsfiddle.net/jC33F/39/ doesn't work. Parents margin:0px, but positionable is auto. – grisevg Sep 06 '11 at 22:06