Home » Tutorials Beginner Tutorial

Synchronized Frame Scrolling Part 1: Vertical Scrolling

2.2/5.0 (23 votes total)
Rate:

Jonathan Fenocchi
February 17, 2006


Jonathan Fenocchi
Jonathan Fenocchi is a talented young developer coming at you from southern TX, USA. Accessibility advocate, proficient programmer, and determined designer, Jonathan spends his free time researching new technologies, developing new ideas, playing video games and listening to rock music. Jonathan runs a Slightly Remarkable blog where he focuses on web-related content, and continues to pursue his goals as an aspiring web developer."

Jonathan Fenocchi has written 20 tutorials for JavaScriptSearch.
View all tutorials by Jonathan Fenocchi...

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;

/* An explanation is needed 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’s important because it tells us where we should put the frame on the right. */

parent.frames["right"].scrollTo(0,top);

/* This code will make the right frame (remember its ID in the fscroll_main.html page?) scroll to zero horizontally, and the same place as this left frame vertically. */

} // End function

function searchScroll(){ // begin function
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
/* Again, we’re setting the variable top to equal that of the amount of pixels the document is scrolled from the top. The reason for not declaring this variable once (before any functions were put into the code), is because you wouldn’t be able to scroll either document! This variable would always equal zero. By putting it into the function, the variable re-validates each time, resulting in a different number (assuming the document was scrolled up or down). */
parent.frames["right"].scrollTo(0,top);
/* This code places the scrolling of the right frame in the same place as the left frame. Keep in mind that if you’ve scrolled horizontally, it will go back to zero. */
window.setTimeout("searchScroll();",1);
/* Why a setTimeout function? We’re going to re-run this function 1000 times a second. The scrolling might appear a bit choppy if you do it really fast, but it doesn’t work in Netscape otherwise. */
}

if(_run == false) // if the browser is Mozilla FireBird or if it’s Internet Explorer…
{
window.onscroll=function(){vScroll();} // when the document is scrolled, run the function specified.
} else { // If the browser is not Mozilla FireBird or Internet Explorer…
window.onload=function(){searchScroll()} // when the document loads, run the function specified. Remember we’re using a setTimeout function with this function, because it takes place when the document loads, not when it is scrolled (some browsers do not support the window.onscroll event handler).
}

This should have explained the meaning of the code to you. For our left frame, we put a <SCRIPT TYPE=”text/JavaScript”> [the code goes here] </SCRIPT> tag in the <HEAD> tag. Now, open up your fscroll_main.html page, and see the result (scroll the left frame, and the right one should scroll with it)! Isn’t it great! Well, there’s more where that came from! Let’s apply the same code concepts to the fscroll_right.html frame! To do that, we simply change the way the word “right” appears in the JavaScript code:

function vScroll()

parent.frames["left"].scrollTo(0,top);

function searchScroll(){

parent.frames["left"].scrollTo(0,top);

Remember, in the fscroll_left.html page, you’ll need to put “right” in that part of the code; in the fscroll_right.html page, you’ll need to put “left” in that code—this way we’ll refer to the opposite frame.

In short, the code is simple. It’s just the logic involved and the knowledge of which browsers support what code in order to get the desired effect.

See an example of this script in action.


Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow