ansaurus

Question

jQuery(document).width() doesn't include width outside of viewable area

Answer 1

+1 A:

To get the width of the "invisible" portion, simply subtract the total document width from the visible window width:

jQuery(document).width() - jQuery(window).width()

jsFiddle example

alt text

Like you write, $(document).width() is the total width, and $(window).width() is the width that is currently visible.

Tested in the latest Chrome, Firefox, Internet Explorer, and Safari.

Peter Ajtai 2010-09-16 01:07:34

I used a ruler. $(document).width() reported the same width as what the ruler showed, which was the the width of the visible window. Then there's an extra portion outside the visible area which I can bring in using the horizontal scroll bar.

Tony_Henrich 2010-09-16 08:05:37

@Tony - Can you provide a picture? I don't understand what the extra portion is? ---- Are you referring to the padding and margin, the chrome of the browser, the width of the vertical scroll bar, or something else?

Peter Ajtai 2010-09-16 15:33:10

The document width is wider than the visible window. Therefore there's a horizonal bar showing. The part of the document which is not showing which is to the right of the window is what I call invisible. You bring it in into view when you drag the bar to the right. That's the width I want to get. The document part which is larger than the window/viewport.

Tony_Henrich 2010-09-16 15:43:41

@Tony - Edited. Just subtract the total width from the visible width to get the width of the document that is not visible.

Peter Ajtai 2010-09-16 15:50:51

@Tony - Did you see my screenshots (I show the scroll bar)? Am I understanding you?

Peter Ajtai 2010-09-16 16:05:29

It was all my mistake. See my answer. I will accept yours for your efforts.

Tony_Henrich 2010-09-16 18:26:28

@Tony - Thanks ;)

Peter Ajtai 2010-09-16 18:37:48

Answer 2

A:

I don't know if there's a jQuery equivalent, but

document.getElementsByTagName('body')[0].offsetWidth

should give the correct width of the page, regardless of window size.

Litso 2010-09-16 15:45:09

Same as $(document).width() or $('body').width()

Tony_Henrich 2010-09-16 17:48:23

Answer 3

A:

It's my mistake. I was displaying the width and then was code somewhere after that that was adjusting the width of some elements, which caused the document to be wider.

Tony_Henrich 2010-09-16 18:25:20

Hehe. Shit happens, these mistakes are always hard to find.

Litso 2010-09-17 06:08:47

ansaurus

tags:

views:

answers:

jQuery(document).width() doesn't include width outside of viewable area

jsFiddle example

related questions