Synchronized Frame Scrolling Part 1: Vertical Scrolling | 2 | WebReference

Synchronized Frame Scrolling Part 1: Vertical Scrolling | 2

To page 1current page
[previous]

Synchronized Frame Scrolling Part 1: Vertical Scrolling

/* 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.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: https://cmm.sonoracabinets.com/

To page 1current page
[previous]

Created: June 5, 2003
Revised: January 14, 2004

URL: https://webreference.com/programming/javascript/jf/column2/1