1. Home
  2. Computing & Technology
  3. JavaScript

Browser Window Size and Position

4. Add to Your Page

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Sample Obtain the Script

All that remains to be done now is to reference the fields within your Javascript.

if you want to add an extra column to the right of your page if the page is over a certain width (say 800 pixels) then you include the code for that column in an if statement that tests the page width like this:

if (pageWidth() > 800) {
// code for extra column goes here
}

If you want to test if a given object has moved outside of the browser window we might use code like this:

if (obj.left < posLeft() ||
obj.right > posRight() ||
obj.top < posTop() ||
obj.bottom > posBottom()) {
// not fully visible on screen
}

Another thing you may want to do is toplace an object in a particular position in the window independently of the scroll position of the page. Let's say we want the object to be down 50 pixels and across 100 pixels from the top left corner of the window. Here's code to do this.

obj.top = posTop() + 50;
obj.left = posLeft() + 100;

I have found lots of uses for these functions and I am sure that you will too.

Introduction | Sample Page | Obtain the Script | Add to Your Scripts
Explore JavaScript
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.