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

JavaScript Synchronized Frame Scrolling, Pt. 2: Horizontal Scrolling

By Jonathan Fenocchi.

In part two of our mission to scroll two frames at the same time, we’ll look at how to make these frames scroll horizontally. This is useful for horizontally oriented sites, such as those designed with Flash or CSS – which is not uncommon.

To begin, let’s start with our three framesets – fscroll_left.html, fscroll_main.html, and fscroll_right.html. The two documents fscroll_left.html and fscroll_right.html 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>Horizontal Scrolling</title>
</head>
<body>
<div style=”width: 800%;”>
</div>
</body>
</html>

Because of the DIV with a width of 800%, or 8 times the width of the document, we have a horizontal scrollbar. This is necessary for our example, but not when you put it to practical use. If you notice that the left frame is not as wide as the right frame, it’s because the width of the left frame, multiplied by eight times, is not as much as the width of the right frame, also multiplied eight times.

As in my previous article, the fscroll_main.html page will 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>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>

This basic frameset simply contains the two frames; there’s nothing special about it, per se. Now, let’s have a look at fscroll_right.htm. You’ll notice that we’re using variables that refer to “left” and “x.” These variables specify the amount of pixels the document has scrolled from the left to the right. If you haven’t scrolled the page, it will be at zero, meaning the opposite frame will also be zero.

<!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 */
        parent.frames["left"].scrollTo(left,0); /* Now, scroll the left frame to match 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 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 what was done earlier. We’re setting the left variable to the distance (in pixels) that the document has been scrolled from the left to the right. */
  parent.frames["left"].scrollTo(left,0); /* scroll the left frame to the position of this this frame */
  window.setTimeout("searchScroll();",1); /* run this function once 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:800%">Testing...</div>
</body></html>

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

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

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