jQuery: how do I position an image?

Question

I have this:

function startLoad(object_id) {
$j('div#'+object_id).addClass('currently-loading');
var con = $j('div#overlay');
var img = $j('div#loadimg');
var tab = $j('table.app');
con.height(tab.height() - 30);
con.width(tab.width());
con.css('display', 'block');

img.css('margin-left', (con.width() / 2 - 36) + 'px');
img.css('margin-top', (con.height() / 2 - 36) + 'px');
//alert( (con.width() / 2 - 36)+" "+(con.height() / 2 - 36))

}

and when i uncomment the alert, it shows the correct dimensions... I have tried left, margin-left, both with and without the px. (some for top)

what am I doing wrong?

everything works, except img is in the top left corner of the div that contains it.

In these kind of cases when you're trying to find the right style attributes, it helps to alter it in firebug to get it pixel perfect to find out exactly what you need to do. — Dan Heberden, Jul 09 '10 at 18:01

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

I've just posted an answer for the same question here.

[See it in action]

HTML

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

Then when you're loading things you just say:

$("#overlay").fadeIn();

And when you finished

$("#overlay").fadeOut();

edited May 23 '17 at 11:48

Community

1
1

answered Jul 09 '10 at 17:58

gblazex

49,155
12
98
91

so, i changed my img modifications to this $t = $j('div#overlay'); img.css({ top : ($t.width() / 2 - 36), left : ($t.height() / 2 - 36) }); i really like the syntax, but my image is still in the top left =\ – NullVoxPopuli Jul 09 '10 at 18:04
as it turns out, I was using the wrong id name. lol. anyway... now i just need to fix my math, so its centered. alert(con.width()+" "+con.height()+"--"+(con.width() / 2 - 36)+" "+(con.height() / 2 - 36)) for whatever reason, dividing by two doesn't mean half? – NullVoxPopuli Jul 09 '10 at 18:15
your math looks fine. Make sure to use `position:absolute` for both `#overlay` and `#loadimg`. – gblazex Jul 09 '10 at 18:21
also use `tab.outerWidth()` and height because it includes padding, while `width()` doesn't. But as i said, **see my answer** and change accordingly... – gblazex Jul 09 '10 at 18:24

score 0 · Answer 2 · answered Jul 09 '10 at 18:00

0

for using left and top you need to position the image absolutely.

position:absolute;

also the container element should have position:relative; set on it

use this and try top, left instead of margin-top and margin-left in your code;

answered Jul 09 '10 at 18:00

naiquevin

7,588
12
53
62

No, he could use `position: relative` too. – Brock Adams Jul 09 '10 at 18:07

jQuery: how do I position an image?

2 Answers2

[See it in action]