Set jQuery .css() based on variable

Question

I'm trying to set the margin-top and margin-left values to half of an element's respective size so as to center it. However it just goes 50% on the left and top.

    var $img = document.getElementsByClassName('box'); 
    var $width = $img.clientWidth;
    var $height = $img.clientHeight;
    $('#overlay').append('<div id="boxOverlay"></div>');
    $('#boxOverlay').css('position', 'fixed');
    $('#boxOverlay').css('top', '50%');
    $('#boxOverlay').css('margin-top', '-$height/2');
    $('#boxOverlay').css('left', '50%');
    $('#boxOverlay').css('margin-left', '-$width/2');
    $('#boxOverlay').css('max-height','80%');
    $('#boxOverlay').css('max-width','90%');
    $('#boxOverlay').height($height);
    $('#boxOverlay').width($width);

pdoherty926 · Accepted Answer · 2013-08-26 02:04:41Z

2

Try this:

var $img = $('.box');
var $width = $img.width();
var $height = $img.height();
// ...
$('#boxOverlay').css('margin-top', (($height / 2) * -1));
$('#boxOverlay').css('margin-left', (($width / 2) * -1));

Fiddle

Also, it's a best practice to pass a style object to the css method:

var styles = {
    'margin-top': (($height / 2) * -1),
    'margin-left': (($width / 2) * -1)
};

$('#boxOverlay').css(styles);

With this approach, you only query the DOM once and you'll avoid multiple repaint and/or reflows (citation needed).

edited Aug 26, 2013 at 2:04

answered Aug 26, 2013 at 1:38

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pdoherty926 Over a year ago

Err, isn't $img a collection of DOM elements? What are the values of $width and $height?

spriore Over a year ago

I'm making a slideshow based on certain specs. There are different image sizes and its meant to to pull the image height and width from the image.

Bieber_zh_cn · Accepted Answer · 2013-08-26 01:45:07Z

1

in jquery the margin-left is marginLeft Remove the middle of the dash you can try

$('#boxOverlay').css('marginTop', '-$height/2');
$('#boxOverlay').css('maxHeight','80%');
$('#boxOverlay').css('maxWidth','90%');

answered Aug 26, 2013 at 1:45

Bieber_zh_cn

111 bronze badge

2 Comments

dc5 Over a year ago

'-$height/2' is still a string and an invalid margin-top value.

Bieber_zh_cn Over a year ago

$('#boxOverlay').css('marginTop', -$height/2);

theatlasroom · Accepted Answer · 2013-08-26 01:50:29Z

0

Get rid of the single quote marks around the variables you want to use. By adding quote marks around your variables you're actually passing the function [.css()] a string literal instead of a variable.

MDN - Strings

answered Aug 26, 2013 at 1:50

theatlasroom

1,1949 silver badges12 bronze badges

Collectives™ on Stack Overflow

Set jQuery .css() based on variable

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related