Question

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

Answer 1

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