jQuery incorrectly reports a width of zero

Question

I'm trying to access the width of certain elements by using jQuery's .width() function, but sometimes the return value is 0 when I don't expect it. Is this a known issue? Does an element have to be visible for this to work, perhaps? If there are limitations, how can I work around them?

Answer 1

The element has to have loaded.. try binding it on window load

$(window).load(function(){  alert('#img').width()   });

You can also try explicitly defining a width through css on the element I guess.

Answer 2

If you're dealing with images, make sure to run the code in $(window).load() rather than $(document).ready(), like this:

$(window).load(function() {
  var width = $("img").width();
});

Otherwise, make sure the element is visible, hidden elements have no .width() or .height() (it'll return 0 for both).

Answer 3

Hi, You can check if image is visible with this extra condition

$(window).load(function(){  if($("#img").is(":visible"))alert('#img').width()   });