DHTML Lab: Dynamic Synchronized Frames; Step-by-Step

View a spreadsheet with synchronized frames.

View a map with synchronized frames.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

Dynamic Synchronized Frames
cross browser version: step-by-step

Although we have digressed to provide background for HTML attributes and JavaScript properties, the technique itself is certainly the simplest to use of all presented in these columns. Follow the three simple steps outlined below, and you can't fail.

1. Create your frameset. If you require scrollbars on the left and top frames, set the SCROLLING attribute for these frames to "auto". If no scrollbars are required (recommended for cleaner look), set SCROLLING to "no". Give the top and left frames a NAME, which you will use in the script later. Review our Discussion.

2. In the left and top frames, enclose the complete BODY of the pages in a Navigator-specific LAYER. Add the attributes to the BODY tag for removing unwanted margins. Review our Discussion.

3. In the main frame, include this cross-browser script in the HEAD of the document. The only change you must make is the name of left and top frames, which are specific to your application.

<SCRIPT LANGUAGE="Javascript1.2">
<!--
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>

Note:
The script developed assumes that you specify scrollbars for both left and top frames, or neither. If, for some reason, you wish to have the left frame scroll and not the top, or vice-versa, you will have to modify the script. These modifications are elementary, and simply involve exclusions.

Also, when creating the HTML files for the top and left frames, make sure your initial alignment is correct. Tables are the most difficult to space and align.

That's it. Simple enough. Now all you have to do is find an original use for the technique. The complete code is repeated in our usual code page.