| home / programming / javascript / jf / column4 / 1 |   [previous] |
|
|
|
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>
By 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.
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: http://cmm.sonoracabinets.com/
| home / programming / javascript / jf / column4 / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: June 5, 2003
Revised: July 16, 2004
URL: http://webreference.com/programming/javascript/jf/column4/1
