dcsimg

home / programming / javascript / jf / column4 / 1 current pageTo page 2
[next]

JavaScript Synchronized Frame Scrolling, Pt. 3: Putting It All Together

By Jonathan Fenocchi.

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 current pageTo page 2
[next]

Created: June 5, 2003
Revised: July 16, 2004

URL: http://webreference.com/programming/javascript/jf/column4/1