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

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();

Answers:

Answer

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

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

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());
});
Answer

This works if you fix the last line of your code:

alert($('#main').width());

Here is the fiddle

http://jsfiddle.net/UMAbx/

Also, div id=container was spelled incorrectly in the HTML. Fixed in the fiddle.

Answer

I can't seem to replicate this behavior. Perhaps someone overrode jQuery.fn.width() with an implementation that returns the value as a percentage? I'd debug in Firebug or similar and inspect that function to be sure.

Answer

jQuery width() returns the width of an element without its border and padding.

CSS width in the other hand could include border and padding (that depends on your browser/css default box model behaviour).
If you need the entire width of the element, you should use jQuery outerWidth() instead.

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.