Dynamic Synchronized Frames
SPECIAL EDITION; the director's cut
This technique requires a frameset document, top and left frame documents, and a main frame document. If you require only a synchronized left or top frame, you can modify the code accordingly.
The Frameset
Many of the frameset attributes depend on your application. These are highlighted in purple. Change these to suit your adaptation of the technique.
<HTML>
<HEAD>
<TITLE>Frameset</TITLE>
</HEAD>
<FRAMESET COLS="50,*" BORDER=0>
<FRAMESET ROWS="50,*">
<FRAME>
<FRAME NAME="leftGuy" SRC="left.html"
MARGINWIDTH=0 MARGINHEIGHT=0
SCROLLING="no">
</FRAMESET>
<FRAMESET ROWS="50,*">
<FRAME NAME="topGuy" SRC="top.html"
MARGINWIDTH=0 MARGINHEIGHT=0
SCROLLING="no">
<FRAME SRC="main.html"
MARGINWIDTH=0 MARGINHEIGHT=0>
</FRAMESET>
</FRAMESET>
</HTML>
The Left Frame
The only addition to the page HTML is the insertion of the enclosing LAYER tag, and the alignment-ensuring browser-specific attributes in the BODY tag.
<HTML>
<HEAD>
<TITLE>Left Frame</TITLE>
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>
<LAYER>
...page HTML as is...
</LAYER>
</BODY>
</HTML>
The Top Frame
Same rules as the left frame apply.
<HTML>
<HEAD>
<TITLE>Top Frame</TITLE>
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>
<LAYER>
...page HTML as is...
</LAYER>
</BODY>
</HTML>
The Main Frame
This frame is the "controlling frame" and contains the script. Don't forget the margin attributes in the BODY tag, and to change the JavaScript reference to the left and top frames to use the NAME you gave them.
<HTML>
<HEAD>
<TITLE>Main Frame</TITLE>
<SCRIPT LANGUAGE="Javascript1.2">
<!--
/* syncFrames.js (Cross-browser Synchronized Frames)
* Copyright (c) 1999-2000 internet.com Corp. To receive the right to license
* this code to use on your site the original code must be copied from
* Webreference.com. License is granted if and only if this entire copyright
* notice is included, and you link from the page on which the code is used
* to Webreference at http://webreference.com/dhtml/ for the latest version.
* By Peter Belesis. v1.0 980325 - column 17.
*/
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) 1 : 0;
leftFrame = parent.frames.leftGuy; // change name
topFrame = parent.frames.topGuy; // change name
if (IE4) onscroll = keepTogether;
if (NS4) onload = checkScroll;
function keepTogether(){
leftFrame.document.body.scrollTop = document.body.scrollTop;
topFrame.document.body.scrollLeft = document.body.scrollLeft;
}
function checkScroll() {
if (leftFrame.scrollbars.visible) {
setInterval("scrollFrame()",10);
}
else {
setInterval("scrollLayer()",10);
}
}
function scrollFrame() {
leftFrame.scrollTo(leftFrame.pageXOffset,pageYOffset);
topFrame.scrollTo(pageXOffset,topFrame.pageYOffset);
}
function scrollLayer() {
topFrame.document.layers[0].left = -pageXOffset;
leftFrame.document.layers[0].top = -pageYOffset;
}
//-->
</SCRIPT>
</HEAD>
<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>
...page HTML as is...
</BODY>
</HTML>
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: Mar. 25, 1998
Revised: Mar. 25, 1998
URL: http://www.webreference.com/dhtml/column17/allCode.html
