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 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