Contents
Introduction
Description
Code

Previous
Continue

Introduction

This example uses a very simple script to create a paged view of a single document. The three links to the left are already defined on this page in three separate absolutely positioned DIV elements. When a link is selected, the corresponding DIV is displayed and the other contents are hidden.

If you are using a non-4.0 browser, this page is still functional. The three links are displayed sequentially and clicking on a link takes you to the correct position in the document.

Description

Each page is contained within a DIV that has a ID of the following format - pagen, where n represents the page number. Pages are numbered starting at 1. Inside the code is a variable pageCount which represents the total number of pages.

To display a specific page, you call a function, movePage(n), passing the page number to display. The movePage function automatically displays the appropriate page.

The movePage() function has no effect on down-level browsers. To give the links a useful behavior, the anchore elements link to a bookmark representing the section. For example, the link to this description page is defined as follows:

 <A HREF="#p2" ONCLICK="return movePage(2)">
  Description
 </A>

If you were to look at this source code, you would find the following bookmark at the top of this section:

 <A NAME="p2"></A>

In down-level browsers, this bookmark acts as the destination for the link. In the 4.0 browsers, this bookmark is ignored.

The Code

This example requires a very small amount of script:

  /* This code can be reused and modified as 
     long as the copyright notice and URL 
     are maintained. */
  // This code is
  // copyright 1998 InsideDHTML.com, LLC.
  // http://www.insideDHTML.com
  
  // Set this to the number of pages
  var pageCount = 3
  // Browser detection veriables
  var allSupport = (document.all!=null)
  var layersSupport = (document.layers!=null)

  function getElement(elName) {    
    // Get an element from its ID
    if (allSupport)      
     return document.all[elName]    
    else
      return document.layers[elName]  
  }

  function setVisibility(el, bDisplay) {    
    // Hide or show to tip
    if (bDisplay)      
      if (allSupport)        
        el.style.visibility = "visible" 
      else        
        el.visibility = "show";    
      else      
        if (allSupport)
          el.style.visibility = "hidden"      
        else        
          el.visibility = "hidden"
  }

  function movePage(what) {
   if ((allSupport) || (layersSupport)) {
     for (var i=1; i <=pageCount; i++) 
       setVisibility(getElement("page"+i),what==i)
     return false
   } else 
     // Ignore code in downlevel browsers
     return true
  }

  function doResize() {
    location.reload()
  }

  // Work-around Netscape resize bug
  if (layersSupport)
    setTimeout('window.onresize=doResize',500)

 

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