Synchronized Frame Scrolling Part 1: Vertical Scrolling

Have you ever needed to vertically scroll two frames at once, using one scrollbar? In this article, you’ll learn how to set up two frames, and how to get them to “synchronize” vertically. This may be especially useful for those who have designed web sites with a Flash interface or similar sites.

The first thing we need to do is set up our HTML. It’s going to be three simple pages: the main frame (fscroll_main.html), the left frame (fscroll_left.html), and the right frame (fscroll_right.html). The left and right frames’ source code should be simple HTML documents. Give them a scrollbar by putting STYLE=”height: 800%;” in a <DIV> tag in your HTML code. As for the fscroll_main.html page, the code is as follows:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD><META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=UTF-8”>
<TITLE>Vertical Synchronization with Frames</TITLE>
<SCRIPT type="text/JavaScript">
var sys = "document.body.scrollTop";
</SCRIPT></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>

It’s a relatively basic frameset page. Keep in mind the ID’s of the frames, as we’ll need them later on. The most notable object in this document is what the article is about – the variable sys will give us access to the amount of pixels the document is scrolled from the top of the page on either frame. This way, we can determine where to move the opposite frame when one frame is scrolled, and how far to move it.

At first, both your fscroll_left.html and fscroll_right.html pages should look like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<HTML>
<HEAD><META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=UTF-8”>
<TITLE>Frame</TITLE>
</HEAD>
<BODY>
<DIV STYLE=”height: 800%;”><P>This is a paragraph of text, so we don’t have a blank page!</P></DIV>
</BODY></HTML>

For testing purposes, this will create a vertical scrollbar on the page. Next, place a JavaScript tag in the heading of your left frame, and we’ll begin with the code.

var _run; // set a global variable with a null value. The null value will act as a Boolean false value.

if(navigator.userAgent.indexOf("Firebird")!=-1||navigator.appName=="Microsoft Internet Explorer")
{_run=false;}
else {_run= true;}

/* In the above lines of code, we’re checking to make sure the person is using either Mozilla FireBird or Microsoft Internet Explorer. We’ll set our global variable to false if they are using it, or set it to true in the event that someone is using Netscape or Opera (or some other unpopular browser). This variable will tell us which function to run. */

function vScroll() // begin function
{
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;