DHTML Lab: Dynamic Synchronized Frames | 2 | WebReference

DHTML Lab: Dynamic Synchronized Frames | 2


Logo

  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 https://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: https://www.webreference.com/dhtml/column17/allCode.html