DHTML Lab: Dynamic Synchronized Frames; Navigator 4

View the first frameset discussed on this page.

View the second frameset discussed on this page.

Dynamic Synchronized Frames
the Navigator 4 version

pageXOffset / pageYOffset

As we know, the window object has two properties that store the distances that the page has been scrolled off-screen, pageXOffset and pageYOffset. These properties are not shared with any other element. Unlike the Explorer equivalents, unfortunately, they are read-only. We can use them to determine a frame's scroll offset, but cannot assign new values to them to force a scroll.

scrollTo()

To scroll a window, we must use the JavaScript 1.2 scrollTo() method, which replaces the older scroll() method, and has the following syntax:

windowReference.scrollTo(x-coordinate,y-coordinate)

Determining a Scroll Event

Navigator 4 does not provide us with a built-in method for determining the state of the scrollbars. There is no onscroll event handler. We have to invent our own way.

We could, possibly, check for differences in state by comparing the values of pageXOffset and pageYOffset at timed intervals. A shorter script, however, would be one that constantly updates the scroll position of the left and top frames based on the scroll position of the main frame, using the setInterval() method:

<SCRIPT LANGUAGE="Javascript1.2">
<!--
NS4 = (document.layers) ? 1 : 0;
leftFrame = parent.frames.leftGuy;
topFrame = parent.frames.topGuy;
if (NS4) onload = checkScroll;
function checkScroll() {
  setInterval("scrollFrame()",10);
}
function scrollFrame() {
  leftFrame.scrollTo(leftFrame.pageXOffset,pageYOffset);
  topFrame.scrollTo(pageXOffset,topFrame.pageYOffset);
}
//-->
</SCRIPT>

We call the checkScroll() function as soon as our page loads. The only statement of checkScroll() uses setInterval() to call the scrollFrame() function repeatedly, every 10 milliseconds. You may increase this value, to reduce CPU load, if you have other complex DHTML techniques in the same page.

Every time scrollFrame() is called, it scrolls the left and top frames to the same scroll offsets as the main frame. Since we only need to scroll in one direction in each frame, the left frame retains its own pageXOffset when scrolling, and the top frame retains its own pageYOffset.

Click the first link in the left column to view this script in action in Navigator 4. The scrolling is not as smooth as that of Explorer 4, but it gets the job done. Notice, also, that the frameset has scrollbars.

Click the second link. This frameset uses the same script, but does not have scrollbars. Try scrolling. The left and top frames do not move. Why?

Oddly enough, it could be a matter of semantics.(?!)