| home / programming / javascript / jf / column4 / 1 |   [next] |
|
|
|
In the final chapter of this series, we’ll be looking at how to synchronize frames both vertically and horizontally. We’re going to put the code from the two previous articles into one so that both frames will scroll in both directions: horizontally and vertically.
Let’s begin with two HTML frames, which I’ve named fscroll_left.htm and fscroll_right.htm. These will both have identical HTML, exclusively for our examples:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Horizontal Scrolling</title>
</head>
<body>
<div style="width:900px; height: 900px;">Testing…</div>
</body>
</html>
The DIV element is only necessary in the example to demonstrate the effect of the synchronization. You won’t need these on your pages.
Your frameset should be the simple, standard frameset:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD><META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;
charset=UTF-8”>
<TITLE>Horizontal Synchronization with Frames</TITLE>
</HEAD>
<FRAMESET id="fscroll" name="fscroll" cols="150,*">
<FRAME src="fscroll_left.html" name="left" id="left">
<FRAME src="fscroll_right.html" name="right" id="right">
</FRAMESET>
<BODY>
<P>Your browser does not support frames. Please download the latest version
of your current browser, or get a new one, to view this site.</P>
</HTML>
Below is the code you’ll use to synchronize the right frame. Of course, each part of the code will be explained in detail as we get to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Right Frame</title>
<script type="text/javascript">
var _run; // Set an empty variable named “_run”
if(navigator.userAgent.indexOf("Firebird")!=-1||navigator.userAgent.indexOf("Firefox")!=-1||navigator.appName=="Microsoft
Internet Explorer") // if the browser is Firebird/Firefox or MSIE
{_run=false;} // set the variable _run
to false
else {_run= true;} // otherwise, set _run to true
function scrollR() // begin function scrollR()
{
var left = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
/* If window.pageXOffset is defined, set left to the pageXOffset of the current
document. If it isn’t and document.documentElement is defined, set left
to document.documentElement.scrollLeft. If document.documentElement and window.pageXOffset
are both undefined, set the variable to document.body.scrollLeft */
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
/* An explanation here: the variable “top” is going to represent
one of three things: window.pageYOffset (if it is available, if it’s not,
it represents document.documentElement.scrollTop. If document.documentElement
is not available, it will represent document.body.scrollTop (sound familiar?).
This is the variable we’ll use to determine the amount of pixels this
document is scrolled from the top. It is important because it tells us where
we should put the frame on the right. */
parent.frames["left"].scrollTo(left,top);
/* Now scroll the left frame to the amount of pixels this document is from the
left. If you scroll 3 pixels from the left (to the right) on this frame, the
left document will be scrolled by exactly the same amount. This is how the frames
are synchronized. */
} // End function scrollR
function searchScroll(){
var left = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
/* This is the same as was what we created earlier. Here, we set the variable
(in pixels) indicating where the document has been scrolled from the left to
the right. */
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
/* Again, we’re setting the variable “top” to equal the amount of pixels the document is scrolled from the top of the window, and using it to calculate how far from the top the opposite frame should scroll. .*/
parent.frames["left"].scrollTo(left,top); /* scroll
the left frame to wherever this frame is scrolled to */
window.setTimeout("searchScroll();",1); /* run this function one time
every millisecond, or 1,000 times a second */
}
if(_run == false) // if _run was set to false
{
window.onscroll=function(){scrollR();} /* run the function scrollR() when the
document is scrolled */
} else { // if the variable _run is set to true
window.onload=function(){searchScroll()}
/* when the document loads, run the searchScroll() function 1,000 times a second
(because there is a setTimeout() function inside the searchScroll() function).
*/
}
</script></head>
<body>
<div style="width:900px; height: 900px;">Testing...</div>
</body></html>
| home / programming / javascript / jf / column4 / 1 | [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: June 5, 2003
Revised: July 16, 2004
URL: http://webreference.com/programming/javascript/jf/column4/1
