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

Sliding the Pages

The pages are first set in position by the showMessages() function:

function showMessage() {
  upperPage = firstPage;
  lowerPage = secondPage;
  upperPage.style.pixelTop = 0;
  pageHeight = firstPage.clientHeight;
  secondPage.style.pixelTop = pageHeight;
  firstPage.onmouseover = stopScrolling;
  firstPage.onmouseout = scrollPages;	
  secondPage.onmouseover = stopScrolling;
  secondPage.onmouseout = scrollPages;	
}

The main assignments are that of firstPage's positioning

upperPage.style.pixelTop = 0;

and that of secondPage's positioning:

pageHeight = firstPage.clientHeight;
secondPage.style.pixelTop = pageHeight;

See the second page of this column for explanation of the algorithm. The first page is the upper page and starts at height 0, with respect to the clipping area. The second page starts immediately after the first page. The scrolling of the pages is triggered by the scrollPages() function, called from within the fillCanvas() function. Here is the scrollPages() function:

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

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

The moveUp() function is the one that actually moves the layers up:

function moveUp() {
  upperPage.style.pixelTop -= increment;
  lowerPage.style.pixelTop -= increment;
  if (lowerPage.style.pixelTop 

The first two lines move the firstPage and secondPage layers one pixel up. It then checks if the lowerPage page has arrived at the top of the canvas container (top=0). If it has, it's time for two operations. First, the upperPage layer needs to physically move two heights of the HTML feed down (clip.height*2). Second, logical names should be switched. The upperPage should become the lowerPage, while the lowerPage needs to be promoted to the upperPage. These operations are accomplished inside the rotateThePages() function:

function rotateThePages() {
  if (upperPage == firstPage) {
    upperPage = secondPage;
    lowerPage = firstPage;
  } 
  else {
    upperPage = firstPage;
    lowerPage = secondPage;
  }
  lowerPage.style.pixelTop = pageHeight;
}

This function performs a simple cyclic rotation between upperPage and lowerPage. Notice that the firstPage and secondPage DIV assignments are fixed. They move up and down the two-page stack, by being assigned to both upperPage and lowerPage DIVs, depending on the cycle portion (beginning or end).

Produced by Yehuda Shiran and Tomer Shiran

Created: December 7, 1998
Revised: December 7, 1998

URL: https://www.webreference.com/js/column31/slide.html