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

Setting Up the Pages

The pages are prepared inside the showAndScroll() and makeSecondPage() functions. The showAndScroll() function creates the first page in Netscape Navigator, by calling fillFirstPage() function, which is explained earlier. The rest of the showAndScroll() function sets the firstPages's left, top, and visibility properties:

function showAndScroll() {
  if (NS4) fillFirstPage();
  if (NS4) {
    firstPage.left = GleftPadding;
    firstPage.top = 0;
  }
  else {
    firstPage.style.pixelLeft = GleftPadding;
    firstPage.style.pixelTop = 0;
  }
  eval("firstPage" + styleString).visibility = (NS4) ? "show" : "visible";
  upperPage = firstPage;
  firstPage.onmouseover = stopScrolling;
  firstPage.onmouseout = scrollPages;
  if (NS4) {firstPage.onload = makeSecondPage;}
  else {makeSecondPage();};
}

Notice the inconsistency between the browsers regarding the call to the makeSecondPage() function. Netscape Navigator requires the first page to load before the second one can be attempted.

The makeSecondPage() function sets up the second page by filling it in Netscape Navigator and then assigning its visibility:

function makeSecondPage() {
  if (NS4) fillSecondPage();
  secondPage.onmouseover = stopScrolling;
  secondPage.onmouseout = scrollPages;
  lowerPage = secondPage;
  eval("secondPage" + styleString).visibility = (NS4) ? "show" : "visible";
  if (NS4) {secondPage.onLoad = launchScroller;}
  else {launchScroller();}
}

As before, the scroller cannot be launched before the second page is loaded. The actual launching of the scroller is triggered by setting the top coordinate of the second page and then calling the scrollPages() function for moving up the page:

function launchScroller() {
  if (NS4) {secondPage.top = secondPage.clip.height;}
  else {secondPage.style.pixelTop = secondPage.clientHeight;};
  scrollPages();
}

Produced by Yehuda Shiran and Tomer Shiran

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

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