January 7, 2000 - The Screen Object
January 7, 2000 The Screen Object Tips: January 2000
Yehuda Shiran, Ph.D.
|
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):
Property Navigator 4.0x and up Internet Explorer 4.0x and up screen.height
768 768 screen.width
1024 1024 screen.availHeight
740 740 screen.availWidth
1024 991 screen.availLeft
0 null
screen.availTop
0 null
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.