Inside Technique : Animated Page Sets : Using Page Sets

The pageList object (returned to the p1 variable in the prior example) exposes methods for switching pages. Each page switch supports an optional animation for the exiting page and the entering page. The following three methods are exposed on the pageList object to switch pages:

• setPage(pageNumber, outgoingAnimation, incomingAnimation)
• nextPage(outgoingAnimation, incomingAnimation)
• prevPage(outgoingAnimation, incomingAnimation)

In the demonstration^{IE4, NS4}, we created a set of buttons for navigating between pages. Below represents three of those buttons: one that goes to the third page, another that automatically moves to the next page, and a third button that moves to the previous page. The next and previous page buttons cycle so requesting the page after the last page takes you back to the first page.

// Pages are 0-based.
<INPUT TYPE="button" 
          ONCLICK="p1.setPage(2, _constants.PAGE_SLIDERIGHT, _constants.PAGE_SLIDEUP)" 
          VALUE="Page 3">
<INPUT TYPE="button" 
          ONCLICK="p1.nextPage(_constants.PAGE_SLIDEDOWN, _constants.PAGE_SLIDEUP)" 
          VALUE="Next">
<INPUT TYPE="button" 
          ONCLICK="p1.prevPage(_constants.PAGE_SLIDEUP, _constants.PAGE_SLIDEDOWN)" 
          VALUE="Previous>

Notice that the outgoing and incoming animations are specified with a constant. We use constants to track the animations. This makes it easy to later extend the library with more types of animations. The following animations are currently supported.

_constants.PAGE_STANDARD	No animation. Just hide the outgoing page and display the next page. This is the default.
_constants.PAGE_SLIDELEFT	Slides the page offscreen left or onto screen to the left.
_constants.PAGE_SLIDERIGHT	Slides the page offscreen right or onto screen to the right.
_constants.PAGE_SLIDEDOWN	Slides the page offscreen down or onto the screen from the top.
_constants.PAGE_SLIDEUP	Slides the page offscreen up or onto the screen from the bottom.

The library was designed to be used with minimal intervention by the author. Our intent was to allow an author to create a set of DIV's when used with the library turned into a set of animated pages. While we were successful with this approach for Internet Explorer, translating this to Netscape Navigator proved to be a challenge. On the next page, we explain the issues and solutions we found for making this library work cross-browser.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.