DOM Frames and Scrolling
DOM Windows and Related Objects – Part 5
Forward: In this part of the series, we look at DOM window frame property and the scrolling distance of a scrollbar.
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.
Frames
You can have a web page made up of just one document. In this case there is no frame code in the web page, but the web page behaves as if it has one frame. In order to have proper frames in a web page, you need to use the frameset elements and frame elements. Note: Each frame can have scrollbars for its body element.
The frames Property
The frames property returns an array of all the coded frame elements (including iframes) in the current window. Each item in the array is a reference to a frame. This array is a collection and has a length property, which gives the number of items in the array. 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.frames.length);
</script>
</body>
</html>
The pageXOffset property returns the distance in (pixels) by which the current document (of a frame or web page) has been scrolled from the left. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function xoff()
{
alert(window.pageXOffset);
}
</script>
</head>
<body style="width:150%;text-align:center">
<p>text text text</p>
<button type="button" onclick="xoff()">Click</button>
</body>
</html>
The pageYOffset Property
The pageYOffset property returns the distance in (pixels) by which the current document (of a frame or web page) has been scrolled from the top. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function xoff()
{
alert(window.pageYOffset);
}
</script>
</head>
<body>
<p>text text text</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button type="button" onclick="xoff()">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>
</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