JavaScript Synchronized Frame Scrolling, Pt. 2: Horizontal Scrolling
|
|
|
| 3.1/5.0 (22 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 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>
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. | 
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 0)
