Scrolling HTML Basics, Part I: Sliding the Pages - Doc JavaScript

Sliding the Pages

The scrolling of the pages is triggered by the launchScroller() function, called from within the makeSecondPage() function (delayed of course!). Here is the launchScroller() function:

function launchScroller() {
  secondPage.top = secondPage.clip.height;
  startScroller();   
}

This function is very straightforward. It first assigns the top coordinate of the secondPage layer. As shown in the diagram on the second page, the secondPage layer begins when the firstPage layer ends, which is at a distance of the HTML feed height. The clip.height property is the height of the full HTML file already being loaded to both firstPage and secondPage layers. This point may be somewhat confusing, so pay attention not to mix the clip.height property with the container layer height; they are not the same.

The second and last statement of the launchScroller() function is a call to the startScroller() function. This function first assigns the visibility of both layers to "show", as the default is "hide". It then calls the setTimout() function to delay the execution of the scrolling by 1 second. Here is the full code of the startScroller() function:

function startScroller() {
  secondPage.visibility="show";
  firstPage.visibility="show";
  delay = setTimeout(scrollPages,1000);
}

The requirement to delay the scrolling by a certain period seems to us as another bug in Netscape Navigator. The program spends most of its cycles in the scrollPages() function:

function scrollPages() {
  Gtimer = setInterval(slidePages,Gspeed);
}

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

Finally, we are at the bottom of the function hierarchy. The slidePages() function is the one that actually moves the layers up:

function slidePages() {
        firstPage.moveBy(0,-1);
        secondPage.moveBy(0,-1);
        if (lowerPage.top == 0){
           upperPage.moveBy(0,upperPage.clip.height*2);
           rotatePages();
         }
}

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 layer (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. This rotation is accomplished inside the rotatePages() function:

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

This function performs a simple cyclic rotation between upperPage and lowerPage. Notice that the firstPage and secondPage layer assignments are fixed. They move up and down the two-page stack, by being assigned to both upperPage and lowerPage layers, depending on the cycle portion (beginning or end). It is not clear to us why the return true; statement should be there, but it does not work for more than two cycles without it.

Produced by Yehuda Shiran and Tomer Shiran

Created: November 23, 1998
Revised: November 23, 1998

URL: https://www.webreference.com/js/column30/slide