jQuery Cookbook

Chapter 6. Dimensions

Rebecca Murphey

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