6

I am wondering a little when I look at this code:

// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

...

// Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

What is the difference between $(document).height(); and $(window).height();?

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
Jeff
  • 12,085
  • 12
  • 82
  • 152

4 Answers4

12

Window is the top level client side object, which contains the document. This jsFiddle shows that both $(window).height() and $(document).height() return the same value: http://jsfiddle.net/jackrugile/5xSuv/

Window is the size of the viewport and does not include any of the chrome or browser interface, if I am not mistaken. I believe that the values of both will always be the same, unless you are referencing something like an iframe within a window.

jackrugile
  • 1,653
  • 15
  • 25
  • 4
    This is actually correct. I voted to delete my answer so it won't confuse people in the future. – TJ L Jun 08 '11 at 18:40
  • The open and close parenthesis after height and width is important. It isn't like screen.width. :) – Gellie Ann Nov 16 '16 at 08:46
4

$(document).height is the inside area of the viewport, essentially from the bottom of your toolbar/url bar to your status bar/bottom scroll bar/bottom of the window. The $(window).height gets the entire height of the window, including things like the address bar and scroll bars.

TJ L
  • 23,914
  • 7
  • 59
  • 77
  • Thanks! Just love the speed of you guys! :P – Jeff Jun 06 '11 at 17:47
  • I am not sure if this is correct, I am getting the same values for both. See my jsFiddle below. – jackrugile Jun 06 '11 at 17:52
  • 4
    This is wrong. Document height is the height of the entire document, even the part outside the window that you have to scroll down and see. Window height is the viewport height. For an non-scrolling view, these might be the same. – keithhackbarth Sep 26 '12 at 20:54
3

The jsfiddle code by @jackrugile returns the same values for document and window because the jsfiddle code is running inside an iframe.

To make things more clear if not running Iframes -

  • $(window).height() will return the height of the viewport area excluding the height of any of the toolbars present on the page. The same can be experimented here by opening a firebug console (if firefox) or google chrome console pressing F12 key and firing $(window).height() which will always vary if add / remove any of the toolbars from browser or simply change the height of the firebug or chrome debugger.

    It will always return the height of your browser window substracting the height of all toolbars.

  • $(document).height() will return the height of your page contents, how long your page is.
    The height of toolbars or browser window (if re-sized or not) doesn't affects it's value.
    Before posting my answer it was around 2407 in chrome and 2410 in firefox.

Hope it helps and make things more clear.

Anmol Saraf
  • 15,075
  • 10
  • 50
  • 60
1

Screen -- Your screen: size value changes with your monitor size. 

screen.availWidth  //There is no screen.height

Window or Document -- The Browser's window (the browser viewport, NOT including toolbars and scrollbars). Ignores the invisible scrollable part if the page is scrollable. Use 'window' for IE9 and above, its simple.

window.innerHeight    //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight    //IE 8,7,6,5

Note: Window and Document are not the same. Document object (from DOM) is a property of the Window object (from BOM). But give out the same size. From W3Schools, I would like to think that 'Window' is the notation for the new browser versions (IE9, Chrome, Firefox etc) and 'document' is for IE 8,7,6,5.

http://www.w3schools.com/js/js_window.asp, and also tested the above with a simple aspx page on differently sized monitors.

Gadam
  • 2,674
  • 8
  • 37
  • 56