CODEWITHSUNDEEP
javascriptjquery
ursasmar
ursasmar

Reputation: 377

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

Upvotes: 19

Views: 24722

Answers (6)

AlbertSY
AlbertSY

Reputation: 691

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

Upvotes: 3

Florian Margaine
Florian Margaine

Reputation: 60747

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

Upvotes: 3

secretwep
secretwep

Reputation: 716

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.

Upvotes: 4

leeives
leeives

Reputation: 335

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

Upvotes: 19

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 2

Rob Sobers
Rob Sobers

Reputation: 21125

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.

Upvotes: 0

Related Questions