1. Computing

Browser Window Size and Position

Part 1: Introduction

By

Not all of your visitors will use the same screen resolution, and even those who do may not have their browser window maximized all of the time. Even if they did, the fixed control bars that some of them have along one or two edges of the screen will affect the available screen area. As if all those factors didn't create enough variations, you also need to consider that different browsers use different amounts of screen space for browser menus and control bars (which may or may not be displayed).

Given all of these variables, how can we determine just how much space is available within the browser window? Well, we can ask the browser itself, but the different browsers supply this information in different ways as well. Fortunately, there are a couple of JavaScript functions that use whichever method the browser supports to help you determine the browser window size.

One of the main reasons we might want to know the browser window dimensions is to display JavaScript animations on a web page. If this is the case, then we may also wish to know what part of our web page is visible within that window, so that we can position our animation where it can be seen. Again, the different browsers supply this information in different ways, so we need some functions that will use whatever way that the browser supports to give us this information.

To save you the effort of writing functions yourself to extract this information, I am supplying a set of six functions that will provide this information for you. Let's start by looking at these functions and what they return for your browser/screen resolution.

  1. About.com
  2. Computing
  3. JavaScript
  4. Script Library
  5. Function Library
  6. JavaScript Detection of Browser Window Size and Position

©2014 About.com. All rights reserved.