[previous]
| home / programming / javascript / jf / column3 / 1 | [previous] |
You’ll notice we’ve updated the code for the new name of the Mozilla browser (known as FireFox), which used to be Firebird. Because of the name change, we must check for both versions. If you’re using code from my previous article, you’ll want to update that as well, for compatibility. There are no other large differences, other than the fact that we’re scrolling horizontally, so our code is using “x” and “left” offsets for its calculations.
We’ll be doing basically the same thing with our left frame, only we’ll have a different name for our function, scrollL(), and we’ll be scrolling the right frame, instead of the left one. At this point, you should understand the code pretty well, so there isn’t a need for me to go into detail about what I’ve already explained.
Now, I’ll describe what is different from the above code in the right frame.
<!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;
parent.frames["right"].scrollTo(left,0);
/* scroll the right frame to the position of this frame */
}
function searchScroll(){
var left = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
parent.frames["right"].scrollTo(left,0); /* scroll the
right frame to the position of this frame */
window.setTimeout("searchScroll();",1);
}
if(_run == false)
{
window.onscroll=function(){scrollL();} /* run function scrollL() when this document
is scrolled, this function also scrolls the right frame, meaning that both frames
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 delay, unlike the scrollL() function, which has virtually no delay at
all. This function exists for browsers other than Firefox and MSIE, which support
the window.onscroll event handler. */
}
</script></head>
<body>
<div style="width:800%">Testing...</div>
</body></html>
As explained in commented code above, if the browser supports the window.onscroll event handler, it will scroll the opposite frame at the same time as the current frame is scrolled; if the browser does not support it, it will update the opposite frame 1,000 times a second, to make sure both frames are scrolled to the same point.
In conclusion, the code is similar to the code in my previous article (Synchronized Frame Scrolling Part 1: Vertical Scrolling), but has some modifications that must be understood for it to work horizontally, instead of vertically. In part three of this series, I’ll show you how to achieve both vertical and horizontal synchronization – the mother of all scrolling tricks!
See an example of this script in action.
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/
| home / programming / javascript / jf / column3 / 1 | [previous] |
Created: June 5, 2003
Revised: April 14, 2004
URL: https://webreference.com/programming/javascript/jf/column2/1