JavaScript Synchronized Frame Scrolling, Pt. 3: Putting It All Together
|
|
|
| 2.2/5.0 (13 votes total) |
|
|
|
|
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... |
In the final chapter of this series, we’ll be looking at how to synchronize frames both vertically and horizontally. We’re going to put the code from the two previous articles into one so that both frames will scroll in both directions: horizontally and vertically. Let’s begin with two HTML frames, which I’ve named fscroll_left.htm and fscroll_right.htm. These will both have identical HTML, exclusively for our examples: <!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:900px; height: 900px;">Testing…</div>
</body>
</html> The DIV element is only necessary in the example to demonstrate the effect of the synchronization. You won’t need these on your pages. Your frameset should be the simple, standard frameset: <!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> Below is the code you’ll use to synchronize the right frame. Of course, each part of the code will be explained in detail as we get to it. <!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 */
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
/* An explanation 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 is important because it tells us where we should put the frame on the right. */ parent.frames["left"].scrollTo(left,top);
/* Now scroll the left frame to 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 exactly 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 the same as was what we created earlier. Here, we set the variable (in pixels) indicating where the document has been scrolled from the left to the right. */
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop; /* Again, we’re setting the variable “top” to equal the amount of pixels the document is scrolled from the top of the window, and using it to calculate how far from the top the opposite frame should scroll. .*/ parent.frames["left"].scrollTo(left,top); /* scroll the left frame to wherever this frame is scrolled to */
window.setTimeout("searchScroll();",1); /* run this function one time 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:900px; height: 900px;">Testing...</div>
</body></html> Instead of copying and pasting the horizontal and vertical synchronization code, the script can be combined with few changes. All I’ve done is placed the same variables (which were named differently), in the same places in the code. Instead of using the scrollTo function again, which would reset the horizontal or vertical location of the opposite frame to zero, I sent the horizontal and vertical locations of the opposite frame to the function at the same time. The scrollTo function takes two values: top, and left. These are variable names, but to the built-in JavaScript function, they are the values necessary for calculating where either frame should be scrolled to. By sending both the top and left variable values to the function, we can avoid resetting the vertical or horizontal scrolled location of the opposite frame. The same code, as shown above, would be used for your left frame, with a few minor changes… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Left Frame</title>
<script type="text/javascript">
var _run; if(navigator.userAgent.indexOf("Firebird")!=-1||navigator.userAgent.indexOf("Firefox")!=-1||navigator.appName=="Microsoft Internet Explorer")
{_run=false;}
else {_run= true;} function scrollL()
{
var left = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop; parent.frames["right"].scrollTo(left,top);
/* Scroll the right frame to wherever this frame is scrolled to */
}
function searchScroll(){
var left = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop; parent.frames["right"].scrollTo(left,top);
window.setTimeout("searchScroll();",1);
}
if(_run == false)
{
window.onscroll=function(){scrollL();} /* run function scrollL() when this document is scrolled, remember this function scrolls the right frame, so it causes both frames to scroll at the same time */
} else {
window.onload=function(){searchScroll()} /* run function searchScroll() which scrolls the right frame. This function runs a thousand times a second, so it has a small delay, unlike the scrollL() function. This is because it is unsupported by browsers other than Firefox and MSIE. */
}
</script></head>
<body>
<div style="width:900px; height: 900px;">Testing...</div>
</body></html> ConclusionBy now, the code should make more sense to you. I’ve outlined the basics, though most of the code is self-explanatory. While the script doesn’t need any adjustment, you can create many variations of it. For example, you can synchronize scrolling on <div> elements on the same page, rather than using frames. Here's an example of vertically and horizontally synchronized frames. | 
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 0)
