DOM Window Placement and Document Scrolling
DOM Windows and Related Objects – Part 9
Forward: In this part of the series, we see how DOM can be used to give dimensions to a window; how it can be used to position a window and also how it can be used to scroll a document.
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.
The resizeTo() Method
The resizeTo() method gives a window a new width and height. This is resizing to the new dimensions. It does not matter whether the window is initially maximized or not. If the window is initially maximized, it can be resized to a smaller size. The syntax is:
window.resizeTo(width, height)
It is the whole window that is resized, not the tab window. The width and height are in pixels; you type them without the units. Read and try the following code (click the button); the code may not work with your particular browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function rsizet()
{
window.resizeTo(400, 300);
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="rsizet()">Click</button>
</body>
</html>
Resizing To is achieved by changing the position of the right-bottom corner of the window.
The resizeBy() method increases or decreases a window by a specified amount. Resize To - means giving the window a completely new size. Resize By - means increasing or decreasing the window, by a specified amount. It does not matter whether the window is initially maximized or not. If the window is initially maximized, it can be resized by decreasing the amount. The syntax is:
window.resizeBy(width, height)
It is the whole window that is resized, not the tab window. The width and height are in pixels; you type them without the units. If a value is positive, you get an increase; if it is negative you get a decrease. Read and try the following code (click the button); the code may not work with your particular browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function rsizeb()
{
window.resizeBy(-360, -270);
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="rsizeb()">Click</button>
</body>
</html>
The moveTo() Method
The moveTo() method moves the window to a specified position. This new position is measured from the left-top corner of the window relative to the left-top corner of the screen (displaying area). The syntax is:
window.moveTo(x,y)
x is the new horizontal distance of the left-top corner of the window at its new position relative to the left-top corner of the screen. y is the new vertical distance of the left-top corner of the window at its new position relative to the left-top corner of the screen. x and y are in pixels and the units are not typed. To try this, open the following code in a window; restore the window (to a smaller size); drag the window downward, so that its title bar is midway between the top and bottom of the screen; then click the button in the document. Note: different browsers handle this method slightly differently.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function movet()
{
window.moveTo(200, 200);
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="movet()">Click</button>
</body>
</html>
The moveBy method changes the position of the window by a specified amount. This change is measured relative to the initial position of the window. You have to try the following code with care, open the code in a window; restore the window (to a smaller size); drag the window downward, so that its title bar is midway between the top and bottom of the screen; then click the button in the document.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function moveb()
{
window.moveBy(-150, -150);
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="moveb()">Click</button>
</body>
</html>
Differences between Window and Document
Do not confuse between the window and document on the screen. The document has the scrollbars and essentially deals with the content of the web page. The window is the browser window and includes the horizontal bars such as the menu bar, toolbar, title bar and the status bar. A window may also have frames (windows).
The scrollTo() Method
The scrollTo() method scrolls the content (scrollbars) to the specified coordinates relative to the left and top edges of the content (document) panel. The syntax is:
window.scrollTo(x,y)
x is the horizontal distance from the left edge of the page. y is the vertical distance from the top edge of the page. The units are pixels and they are not typed. If there is no scrollbar or no scroll box, then there will be no movement (in that direction). Read and try the following code (click the button):
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function scrollt()
{
window.scrollTo(100,100);
}
</script>
</head>
<body>
<p>text text text</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button type="button" onclick="scrollt()">Click</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
The scrollBy() method scrolls the content (scrollbars) by the specified coordinates relative to where the content (document) panel was. The syntax is:
window.scrollBy(x,y)
x is the horizontal distance change. y is the vertical distance change. Negative values cause backward movement. The units are pixels and they are not typed. If there is no scrollbar or no scroll box, then there will be no movement (in that direction). Read and try the following code (click the button):
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function scrollb()
{
window.scrollBy(100,100);
}
</script>
</head>
<body>
<p>text text text</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button type="button" onclick="scrollb()">Click</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Time to take a break. 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