Chapter 6. Dimensions
Introduction
Dimensions are a core part of adding advanced behaviors to a website. Once you know how to manipulate the dimensions of elements and their position on the page, you will have a new level of control over your user interface, providing desktop-like behaviors and interactions in your application.
6.1. Finding the Dimensions of the Window and Document
Problem
You want to get the width and height of the window and document in pixels.
Solution
jQuery’s width and height methods provide easy access to the basic dimensions of
the window or document:
jQuery(document).ready(function() {
alert('Window height: ' + jQuery(window).height()); // returns the height of
the viewport
alert('Window width: ' + jQuery(window).width()); // returns the width of the
viewport
alert('Document height: ' + jQuery(document).height()); // returns the height
of the document
alert('Document width: ' + jQuery(document).width()); // returns the width of
the document
});Discussion
It’s important to understand that the width and height of the document can (and likely will) be different from the width and height of the window. The dimensions of the window refer to the size of the viewport—that portion of the browser that is available for displaying a document. The dimensions of the document refer to the size of the document itself. In most cases, the document height will be taller than the window’s height. The document’s width will always be at least the window’s width but may ...