Chapter 6. Dimensions

Rebecca Murphey


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


You want to get the width and height of the window and document in pixels.


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

    alert('Document height: ' + jQuery(document).height()); // returns the height 
of the document
    alert('Document width: ' + jQuery(document).width()); // returns the width of 
the document


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

Get jQuery Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.