spacer

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

home / experts / javascript / column30


Sliding the Pages

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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.

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

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

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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

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