2

I'm getting two different values for the same selector.width() and I try to figure out how / why.

Pseudo code:

<div id="wrapper">
<ul>
<li>...</li>
</ul>
</div>

I have a link that toggles the width of the list items between $('#wrapper').width() and $(window).width(). More or less regular view to fullscreen and back. If the #wrapper is a fixed width (e.g., width=500px) everything is fine.

However, if the wrapper is (for example) width:50% then I get unexpected results. The .width is fine (read: correct) when I first display the page. That is, prev / next controls etc line up correctly. If I toggle to fullscreen and then come back again to regular view the .width value is a couple/few pixels less. I've tried the width=X% with different value for X and the difference changes. That is, it's not fixed.

Padding and margins are set to zero so I don't think that's it.

Also, I have a $(window).resize(function() and if I nudge the window just a bit then the width reading corrects itself. Even if I open Firebug in the bottom is fixes itself.

I understand the pseudo code is vague. I'm just hoping to get some thoughts and direction on how I might be able to pin point where the problem is so I can fix it.

Wouter J
  • 41,455
  • 15
  • 107
  • 112
Chief Alchemist
  • 634
  • 2
  • 7
  • 19
  • It is hard to tell, but you should look into position() and offset() properties of parent element as well. – defau1t Jul 21 '12 at 17:18
  • 1
    How is the wrapper laid out (is it positioned, floated, or in flow)? – Šime Vidas Jul 21 '12 at 17:20
  • 1
    See if this helps http://stackoverflow.com/questions/11530237/window-outerwidth-vs-window-outerwidth – fortuneRice Jul 21 '12 at 17:43
  • Thx for the help ya all. Best I can tell it had something to with the fact that when in fullscreen the inner contents (using position) are actually wider than the wrapper. I found a fix :) When I went from full to reg I set the width of the inner stuff to 0, get (what is then) the (correct) wrapper width and then set the inner stuff (again) with the correct width. Kinda hack-y I suppose but it works. Thx again. – Chief Alchemist Jul 21 '12 at 19:20

2 Answers2

0

jQuery's .width() pulls the CSS width, rather than calculated width, which accounts for padding, borders, etc. To get an element's true width, you should use

document.getElementById('myElement').offsetWidth

Example, showing the difference in results: http://jsfiddle.net/xixao/DNbqu/

Steve
  • 569
  • 8
  • 20
0

First of all I encourage you solve this problem adding/removing a class to the wrapper element that wides the list to 100% not window width. 

.fullscreen {
  width: 100%;
}

// on X event
$('#wrapper').addClass('fullscreen');
// on -X event
$('#wrapper').removeClass('fullscreen');

If you dont`t follow the previous solution... there are other ways. The problem could be related with box-sizing. That means jQuery could think width is one thing while browser could think is another. In this case I think you should use $('X').outerWidth() instead of $('X').width().

Again the first solution should be fine.

Cheers!

AlessMascherpa
  • 682
  • 8
  • 20