Inside Technique : Animated Page Sets : Creating Page Sets

The goal of the page animation script is to allow an author to focus on designing the page rather than worry about the underlying script. Therefore, we made it really simple to define a list of pages. A page list is declared by grouping a set of pages within a DIV with the class name of "pageList":

<DIV CLASS="pageList" ID="pageSet1">
  <DIV CLASS=page STYLE=" visibility: visible">Page 1</DIV>
  <DIV CLASS=page>Page 2</DIV>
  <DIV CLASS=page>Page 3</DIV>
</DIV>

In addition, the pageList DIV needs a document-wide unique ID. The unique ID is used to instantiate the page list object. The immediate contents of the page list is a set of DIVs, each representing an individual page. The order of the page DIV's define the order of the pages in the pageList object. The class, "page", associates a page with the appropriate style sheet.

Once the pages are defined, a single line of script needs to be executed to create the page list object. The setPageSet() function establishes the page list and returns a reference to the page list. This script needs to be included following the HTML declaring the page list:

  var p1 = setPageSet("pageSet1", 10)

The return value of this function must be stored. This variable represents the pageList object and is used to call methods for switching pages. Next, we explore how to quickly switch pages with the pageList object.

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