DOM Window Dimensions and Positions
DOM Windows and Related Objects – Part 4
Forward: In this part of the series, we look at DOM Browser Window Dimensions and Positions.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
What is a Window?
A window is rectangular. It typically has a title bar and a menu bar. The rest of the area below is called the client area. A window can have tool bars (including the address bar) and a status bar.
Screen
The screen here is the rectangle in which any information (text, image, color) can be displayed. The screen is said to be 4-by-3. This means it is 4 times wide and 3 times high. You can have several windows displayed on the screen.
Basic Positions and Dimensions of a Window
When a browser window is maximized, it fills the whole screen. The normal size of a window is not necessarily the maximized size. So, the window can be in different positions on the screen. The screen is described in graphical coordinates with the left-top corner considered as having the coordinates, (0,0). Each point on the screen has the coordinates, (x,y), where x is a positive number measured horizontally from the left edge of the screen and y is a positive number measured vertically from the top edge of the screen. The position of a window is the position of the left-top corner of the window relative to the left-top corner of the screen. The size of a window, when it is not maximized, does not necessarily have to be 4-by-3.
Window with Frames and Documents
A simple browser window has an implicit frame. From the coder’s point of view, it is:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
. . . body content
</body>
</html>
This code can be the essential content for the browser. With this code, there is one frame that is implicit. It is implicit, because there is no frameset tag. This code has one document (which is the code). You can have a window, which would be made up of frames. Frames are coded using frameset tags and frame elements. In the web page code for frames, the body element is replaced by the frameset element. In such a page, each frame takes a document like the one (code) above.
For the rest of this series we shall be talking about windows.
Each browser window is represented in memory by a DOM (ECMAScript) object. You can have more than one browser window displayed on your screen. The browser window DOM object has properties and methods. For the rest of this series we shall look at the properties and methods, beginning with the properties. In this part of the series, we look only at the properties that are to do with the positions and dimensions of a browser window.
Accessing a Window’s Properties
The basic syntax to access a window’s property is,
window.property
Accessing a Window’s Methods
The basic syntax to access a window’s method is,
window.method()
The outerHeight Property
The outerHeight property sets or returns the outer height of a window in pixels. This includes all interface elements like toolbars and scrollbars. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.outerHeight);
</script>
</body>
</html>
In practice, the value you get is different in different browsers. In my system, the value does not include the height of the taskbar when the window is in the maximized state.
The innerHeight Property
The innerHeight property of the window object, sets or returns the inner height of a window's content area, in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.innerHeight);
</script>
</body>
</html>
Note: The content area is the area of the body element, while the client area is all the area below the title and menu bar.
The outerWidth property sets or returns the outer width of a window in pixels. This includes all interface elements like toolbars and scrollbars. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.outerWidth);
</script>
</body>
</html>
Note: The value of the outerWidth may differ in different browsers.
The innerWidth Property
The innerWidth property sets or returns the inner width of a window's content area in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.innerWidth);
</script>
</body>
</html>
The innerwidth may be less than the outerwidth.
The screenLeft property returns the x coordinate of the window. This is the distance of the window left edge, relative to the screen left edge, in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.screenLeft);
</script>
</body>
</html>
The screenTop Property
The screenTop property returns the y coordinate of the window. This is the distance of the window top edge, relative to the screen top edge, in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.screenTop);
</script>
</body>
</html>
The screenX property returns the x coordinate (distance) of the window left edge relative to the screen left edge, in pixels. The screenX Property is the same as the screenLeft property. Both properties work with different browsers; so one may not work with your browser. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.screenX);
</script>
</body>
</html>
The screenY Property
The screenY property returns the y coordinate (distance) of the window top edge relative to the screen top edge, in pixels. The screenY property is the same as the screenTop property. Both properties work with different browsers. Read and try the following code, which may not work with your browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(window.screenY);
</script>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT