Getting the page and viewport dimensions using jQuery

Tue, Jun 8, 2010

Javascript, Programming, Snippets

thats why i Love jquery, cause everything is so simple…

To get the width and height of the whole page (document), use:

var pageWidth = $(document).width();
var pageHeight = $(document).height();

To get the width and height of the viewport (window), use:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

Opera though has a different approach. with Opera 9.5 $(window).height() returns the document height (more info here)
you can get around this by using

var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();


  • Share/Bookmark

Related posts:

  1. JQuery wildcard selectors JQuery wildcard selectors on select boxes, how to reset all...
  2. Custom info windows with jQuery and Google Maps Ben Nolan has a writeup on a new feature in...
  3. Online Load Time for your page Καθώς έψαχνα για optimization tools και resources για MySQL έπεσα...
  4. HTML 5 section is not just a “semantic div” James Graham of Opera has a post about how section...

, , ,

This post was written by:

ropox - who has written 184 posts on ropox.net.

Software Engineer and Web Developer, keen on new technologies and has passion for web engineering.... Internet is my job and i love it...!!! Founded Baldpixel (baldpixel.com) on 2008 which is specialized on enginnering custom web projects while cooperating with top advertising agencies on the net.

Contact the author

Leave a Reply