Inside Technique : Paged Documents : How we did it

The demonstration was created using the following steps:

1. Author the document using notepad (you can use your favorite editor)
2. Surround each "page" with a DIV element. Set the initial styles to hide all pages except the first page.
3. Add a table of contents to the document and link to a bookmark located at the beginning of each page
4. Add the stylesheet to position the pages and the code.

The first step is hopefully self-explanatory. You author your HTML page as one continuous document. The second step involves breaking the document into different "page" segments. Each page is segmented by a DIV element. The DIV element is given an ID representing the page number and pages after the first one are set to be initially hidden:

<DIV ID=page1>
  ...first page...
</DIV>
<DIV ID=page2 STYLE="visibility: hidden">
  ...second page...
</DIV>

The script looks for pages named with the "page" prefix followed by the page numbers. Pages start at 1. When you include the script you will need to set a pageCount variable to match the number of pages you have created.

After setting up each page, you need to add a table of contents. We created the table of contents for the demonstration as follows:

  <A HREF="#p1" ONCLICK="return movePage(1)">
    Introduction</A><BR>
  <A HREF="#p2" ONCLICK="return movePage(2)">
    Description</A><BR>
  <A HREF="#p3" ONCLICK="return movePage(3)">
    Code
  </A>

Each anchor is designed to handle the both 4.0 browsers and legacy browsers. Both a link to a bookmark and a script handler are specified. When running in a 4.0 browser, the movePage function handles hiding and showing the appropriate page. When running in an older browser, the movePage function does nothing and instead the user is navigated to the specified bookmark. Therefore, in addition to creating the table of contents, we also added a bookmark to each page:

<DIV ID=page1>
  <A HREF="#p1">Introduction</A>
  ...first page...
</DIV>

You are not limited to creating a table of contents. Instead, you can use the movePage() functions anywhere, even within one of the paged segments to display move to a specific page. This is the approach we used in our Creating 2D Forms article.

When creating the bookmark, do not give it the same name as the page (eg., page1). If you do both the DIV and the boomark will have the same name and the code will fail (the ID and the NAME attribute are combined as identifiers of elements).

The last step is to add the stylesheet and the code to the page.

  <STYLE>
    #page1, 
    #page2, 
    #page3, 
    #page4 {position: absolute; 
            width: 430px; top: 140px; 
            left: 130px; 
            border: 1px black solid; 
            font: 10pt arial, geneva, sans-serif}
  </STYLE>

Each page must be absolutely positioned at the same position on the screen to give the appropriate effect. If you do not position the elements, you will not be able to hide and show the different pages in Netscape Navigator 4.0. Internet Explorer 4.0 will still hide and show each page, but they will not overlap each other.

On the next page, we provide the complete code for this example, as well as explain a work-around for the Netscape resize bug.

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