How Do I Set HTML Output to Paginate?

Each time your Web page requests a new page from a Web server, users must wait for the new page to appear. If you your Web application needs to display multiple pages, you don't have to use multiple browser windows to perform this task. By using pagination creatively, you can cause different versions of your HTML output to appear when users click different links on your Web page. This technique also makes content appear faster because browsers do not have to communicate with Web servers to retrieve new page content.

Instructions

1. Add the following code to the body section of one of your HTML documents:

   <div id="myPage1" class="hidePage">
   Page 1 contents
   </div>
   <div id="myPage2" class="hidePage">
   Page 2 contents
   </div>

   This code creates two divs that reference a CSS class named hidePage. The first div contains the words "Page 1 contents," and the second div displays the words "Page 2 contents." Replace those words, if you prefer, with other elements such as images, buttons or menus.

2. Add the code shown below to the document's head section:

   following code to the body section of one of your HTML documents:
   <style type="text/css">
   .hidePage {display:none;}
   </style>

   This Style Sheet declaration creates the hidePage class that the divs referernce. The class's display:none attribute makes the divs invisible when the Web page loads.

3. Paste the following code into the document's body section below the divs created in the previous step.

   <div id="pageLinks">
   <a href="#" onclick="return showPage('myPage1')" >Page 1</a>
   <a href="#" onclick="return showPage('myPage2')" >Page 2</a>
   </div>

   This code creates a hyperlink menu that contains two inks. Each link calls a JavaScript function named showPage and passes the ID of the div associated with that link.

4. Add the code shown below to the document's script section:

   function showPage(pageID) {
   var pageCount = 2;

   for(var i=1; i < pageCount+1; i++)
   {
   var pageObject = "myPage" + i;
   document.getElementById(pageObject).style.display = "none";
   }

   document.getElementById(pageID).style.display = "block";
   }

   This function accepts the ID of the div that contains the page contents you wish to view. The pageCount variable contains the number of pages you defined in the document's body section. The "for" loop that follows, loops through each div whose name begins with "myPage" and sets its display attribute to "none." This hides the div. The final statement sets the display attribute of the div you wish to view to "block." This value makes the div visible.

5. Save this document and view it in a browser. Click either of the links that appear in the hyperlink menu to view the page contents associated with the selected link.

Tips & Warnings

• When you need more pages, add additional links to the hyperlink menu and more divs to the code section that contains the two existing divs. If you change "myPage" to another word, change it in all places in the code. Update the value stored in pageCount so that it reflects the number of links in your hyperlink menu.

References

• W3Schools.com: CSS Display Property

Resources

• Html Code Tutorial: Free Reference Guide for Help With HTML Tags Including Form, Frames, Tables, and More!