Scrolling HTML Basics, Part III: Sliding the Pages - www.docjavascript.com

Sliding the Pages

The scrolling of the pages is triggered by the scrollPages() function, which is called from within the launchScroller() function, and is also the event handler for the mouseout event. Here is the scrollPages() function:

function scrollPages() {
  Gtimer = setInterval("moveUp()", Ginterval)
}

This function executes the moveUp() function every Ginterval milliseconds. The Gtimer variable is a pointer to the setInterval() event, and is important for stopping the scrolling, as explained later in this column.

The moveUp() function is the one that actually moves the layers up. Moving things in Internet Explorer is much different than in Netscape Navigator. In Explorer we move DIVs by changing the pixelTop property:

upperPage.style.pixelTop -= Gincrement;
lowerPage.style.pixelTop -= Gincrement;

while in Netscape we use the moveBy() method:

firstPage.moveBy(0,-Gincrement);
secondPage.moveBy(0,-Gincrement);

The pages need to be rotated when the lower page's top coordinate becomes negative. In Internet Explorer, the pixelTop property is examined:

if (lowerPage.style.pixelTop 

and in Netscape Navigator, the top property is examined.

The rotation is accomplished by adding twice the height of the page to the coordinate of the upper page. In Internet Explorer:

upperPage.style.pixelTop += upperPage.clientHeight*2;

and in Netscape Navigator:

upperPage.moveBy(0,upperPage.clip.height*2);

Here is the whole function:

function moveUp() {
  if (NS4) {
    firstPage.moveBy(0,-Gincrement);
    secondPage.moveBy(0,-Gincrement);
    if (lowerPage.top 
  }
  else {
    upperPage.style.pixelTop -= Gincrement;
    lowerPage.style.pixelTop -= Gincrement;
    if (lowerPage.style.pixelTop 
    }
  }
}

The function rotateThePages() is fully consistent between the two browsers. It exchanges the roles of the first page and the second page:

function rotateThePages() {
  if (upperPage == firstPage) {
    upperPage = secondPage;
    lowerPage = firstPage;
    return true;
  }
  upperPage = firstPage;
  lowerPage = secondPage;
  return true;
}

Produced by Yehuda Shiran and Tomer Shiran

Created: December 21, 1998
Revised: December 21, 1998

URL: https://www.webreference.com/js/column32/move.html