spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column17

Logo

View the first frameset discussed on this page.

View the second frameset discussed on this page.

Developer News
HP to Microsoft: Thanks for Nothing
iPhone Remains Left Out as Android Scores Flash
The Year of Living the OpenSocial

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.(?!)


Produced by Peter Belesis and

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script · Book Review: Content Rich
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Building Command Line Utilities with Python · fring Brings Mobility to Junction Networks' OnSIP · Another Big Win for Wi-Fi Positioning

All Rights Reserved. Legal Notices.
Created: Mar. 25, 1998
Revised: Mar. 25, 1998

URL: http://www.webreference.com/dhtml/column17/syncNSone.html