January 7, 2000 - The Screen Object | WebReference

January 7, 2000 - The Screen Object

Yehuda Shiran January 7, 2000
The Screen Object
Tips: January 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The screen object features several properties that deal with the screen's dimensions. The most obvious ones are height and width. The following script segment prints the height and width of the screen:

document.write(screen.height, "<BR>", screen.width);

If you're running Windows 95/98, for example, you probably know that not all portions of the screen are really active. For example, the Windows 95/98 Taskbar, which is usually located at the bottom of the screen, slightly reduces the screen's height. Another classic example of an inactive screen portion is the Office Shortcut Toolbar. The availHeight and availWidth properties reflect the height and width of the active portion of the screen, respectively.

Internet Explorer 4.0x and up correctly takes all permanent and semipermanent user interface features (displayed by the operating system) into account. But Navigator 4.0x and up doesn't always account for such elements. We evaluated these properties on a Windows 95/98 system, displaying an Office Shortcut Toolbar. Both browsers subtracted the height of the Taskbar, but only Internet Explorer 4.0x and up actually subtracted the width of the Shortcut Toolbar.

Another difference between Navigator 4.0x and up and Internet Explorer 4.0x and up is that only Navigator supports the availLeft and availTop properties. They specify the x and y coordinates of the upper left corner of the screen's active portion. The following table lists the properties of the screen object, along with the corresponding values (the ones we got with a Taskbar and a Shortcut Toolbar):

PropertyNavigator 4.0x and upInternet Explorer 4.0x and up
screen.height768768
screen.width10241024
screen.availHeight740740
screen.availWidth1024991
screen.availLeft0null
screen.availTop0null

Notice that availLeft and availTop hold a null value on Explorer, while Navigator reflects the actual coordinates. When a null value is used in a numerical expression, it is automatically converted to 0. We'll use the built-in parseInt() function to convert availLeft and availTop into integers:

var avLeft = parseInt(screen.availLeft);
var avTop = parseInt(screen.availTop);

In this example, the avLeft and avTop variables are both 0 on Internet Explorer 4.0x. If future versions of Explorer support the availLeft and availTop properties of the screen object, the same statements will still function.

Learn more about the Screen object from Column 17, Screen Properties.