Skip to Main Content
jQuery Cookbook
book

jQuery Cookbook

by Cody Lindley
November 2009
Intermediate to advanced content levelIntermediate to advanced
480 pages
11h 50m
English
O'Reilly Media, Inc.
Content preview from 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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery UI in Action

jQuery UI in Action

TJ VanToll
Head First jQuery

Head First jQuery

Ryan Benedetti, Ronan Cranley

Publisher Resources

ISBN: 9780596806941Supplemental ContentErrata Page