jQuery width() not returning correct value on a div with generated content

Question

With the code below, the alert doesn't return the actual size of #main, it always returns the value of #main's css width with the % dropped. So in this case I get 95 in the alert. If I alert parent().width() I get 100.

The data returned from the .get() call is a ul that sometimes is wider than #main, and sometimes not. The width of the content doesn't seem to have any bearing on what .width() returns.

So my question is, how do I get the true pixel width of #main?

CSS:

#container {
    width: 100%;
}

#main {
    width: 95%;
    overflow: hidden; 
}

HTML:

<div id="conatiner">
    <div id="main"></div>
</div>

Javascript/jQuery:

$.get('page.php', function(result) {
    $('#main').html(result);
});
alert($('#main').width();

Answer 1

I ran into this same issue while trying to implement jquery.autogrow-textarea on textareas used for inline editing. The textareas were contained within div's that were not yet displayed (css display: none;). While debugging the .autogrow() javascript code, I discovered that jQuery's .width() was returning the percentage value with the '%' character removed as opposed to the calculated width in pixels (e.g. 100 for 100%, 80 for 80%).

Here is the jsfiddle that illustrates this scenario: http://jsfiddle.net/leeives/ujE6s/

To work around this, I changed my code to .autogrow() as soon as the textarea was displayed instead. The calls to .width() were then accurate.

I'm not sure if you're working with hidden content or not, but thought I'd write up my answer in case others stumbled upon this (like I did) while searching for an issue with jQuery's .width().

Answer 2

I ran into this same problem. For whatever reason (environment) I was not able to pull the correct .width() off of a div that had a percentage value for the width in CSS.

The accepted answer to this post: webkit browsers are getting elements.width() wrong

where Gaby answered with the suggestion to use: $(window).load(...) worked perfectly.

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

I know it's an old post, but this may be useful info to someone if they don't come across the other post.

Answer 3

This is because AJAX is asynchronous. When you run the alert, the request hasn't come back.

Fixed code:

$.get('page.php', function(result) {
    $('#main').html(result);
    alert($('#main').width());
});