From Stephen Chapman,
Your Guide to JavaScript.
FREE Newsletter. Sign Up Now!

Not all of your visitors will use the same screen resolution and even those that do may not all have their browser window maximized all of the time. Even if they did the fixed control bars that some of them will have along one or two edges of the screen will affect the available screen area for the maximized browser window. If that doesn't give enough variations then you also need to consider that different browsers use different amounts of screen space for the browser menus and control bars that your visitors may or may not have visible.

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. Unfortunately the different browsers supply this info in different ways as well. The solution - a couple of functions that will use whichever way that the browser supports to return the requested information.

One of the main reasons that we might want the available browser window dimensions is to use with Javascript animations that we are trying to display on our 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 again 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 what functions there are and what they return for your browser/screen resolution.