| home / programming / javascript / jf / column3 / 1 |   [next] |
|
|
|
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 | [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: June 5, 2003
Revised: April 14, 2004
URL: http://webreference.com/programming/javascript/jf/column3/1
