Providing Page Controls

Although vertical scrolling is a fact of life on the Web, most users would prefer to not spend their time running up and down the window. However, splitting your content over multiple HTML pages to shorten the height of those scrolls means the user has to wait between page loads.

A better solution is to use a simple DHTML technique to split the content of a single HTML file into multiple page layers, which you can then browse or jump between. All of these page layers are in the same HTML file, but only one is displayed at a time.

Paginating the content of a single Web page involves creating several layers using the ID attribute with DIV elements to create what we'll call "page layers" in this section.

Page layers appear to be distinct pages in the browser window, but they actually are all contained within a single HTML file (Figure 24.1). These page layers appear one at a time in the same space, with convenient controls to browse between pages (previous and next) or jump between distinct page numbers (Figure 24.2).

Figure 24.1. When the page first loads, Page 1 is displayed.

Figure 24.2. The visitor can flip through subsequent pages (without reloading) or jump immediately to a particular page.

To add pagination controls:



Start a new JavaScript file and save it as pageControlds.js (Code 24.1). Steps 2 through 5 apply to this fie.

Code 24.1. pageControls.js: This file includes JavaScript functions used to control pagination.

[View full width]

var pageCurrent = 1; var objPage = null; function writePageControls () {      document.writeln ('<div >');      if (pageCurrent!=1) document.writeln ('<a href="#" onclick ="pageTurn(\'back\')">&  prev</a> | ');      else document .writeln ('& prev | ');      document.writeln ('Pages ');      for (i=1;i<=pageTotal;i++) {         if (i==pageCurrent) document.write (i)         else document .write ('<a href="#" onclick ="pageJump('+i+')">'+i+'</a>');        if (i!=pageTotal) document.write('&nbsp;&nbsp;');      }      if (pageCurrent!=pageTotal) document.writeln (' | <a href="#" onclick ="pageTurn( \'next\')">next &rarr;</a>');      else document .writeln (' | next &rarr;');      document.writeln ('</div>');      document.writeln (' <br style="clear:both"/>');      if (pageCurrent==pageTotal) pageCurrent=1;      else pageCurrent ++; } function pageTurn (direction) {      if ((direction=='back') && (pageCurrent!=1)) pageCurrent--;      if ((direction=='next') && (pageCurrent!=pageTotal)) pageCurrent++;      if (objPage) = 'none';      pageName = 'page' + pageCurrent;      objPage=document.getElementById(pageName); = 'block'; } function pageJump (pageName) {      if(!pageName) pageName =1;      if (objPage) = 'none';      pageCurrent = pageName;      pageName = 'page' + pageCurrent;      objPage=document.getElementById(pageName); = 'block'; }


var pageCurrent = 1;

Initialize two variables:

  • pageCurrent holds the page layer that is currently being displayed.

  • objPage holds the object node for the current page layer. Set this to null for now.


function writePageControls() {…}

The function writePageControls() writes the pagination controls into each of the page layers, including a jump-to control (which uses the pageJump() function) for each of the page layers and next and previous controls (which use the pageTurn() function).

As an added bonus, these controls will be grayed out, depending on the page layer. So, for example, the control for the previous page and the jump to control for Page 1 will be grayed out (not clickable) on the first page layer.


function pageTurn (direction) {…}

The pageTurn() function uses a variable called direction to determine whether to go to the previous (prev) or next page layer.


function pageJump (pageName) {…}

The pageJump() function takes you directly to the page passed to it through the variable pageName.



Start a new CSS file and save it as pageControlStyles.css (Code 24.2). Steps 7 and 8 apply to this file.

Code 24.2. pageControlStyle.css: Styles used to set up the pagination controls.

a {      text-decoration: none;      color: RGB (255,0,0); } #content {      display: block;      width: 600px; } #footer {      display: block;      border-top: 1px solid #fff;      padding-top: 2px;      margin-bottom: 8px;      clear: both; } .page { display : none; } .toolBar {      display: block;      font-weight: bold;      border-top: 1px solid #fff;      padding-top: 2px;      margin-bottom: 8px ;      clear: both; }


.page {…}

Add the .page class to your style sheet, which will be used to control the appearance of each page layer within the Web page. Set the initial display for the page class to none, which will hide all of the page layers when the page first loads.


.toolBar {…}

The .toolBar class is used to style the pagination controls.



Start a new HTML file, which will contain your page layers, and save it as index.html (Code 24.3). Steps 10 through 16 apply to this file.

Code 24.3. index.html: The Web page where the pagination action all takes place. Although it is a single HTML file, it has been split into four different "pages."

[View full width]

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd"> <html xmlns =""> <head> <meta http -equiv="Content-Type" content="text/html; charset =utf-8" /> <title>CSS, DHTML &amp; Ajax | Page Controls</title> <script type ="text/javascript">      var pageTotal =4; </script> <script src ="pageControls.js" type="text/javascript"></script> <link rel ="stylesheet" href="pageControlStyles.css" type ="text/css" media="screen" /> </head> <body onload="pageJump(1);"> <div id ="header">      <h1>Alice's Adventures in Wonderland</h1> <span class ="authorName">Lewis Carroll</span> </div> <div id ="content"> <h2>Chapter I <span >Down the Rabbit -Hole</span></h2> <div class ="page" > <h2>Page 1 </h2> <script type ="text/javascript"> writePageControls();</script> <p>Alice was beginning to get very tired of sitting by her sister on the bank …</p> </div> <div class ="page" > <h2>Page 2 </h2> <script type ="text/javascript"> writePageControls();</script> <p>In another moment down went Alice after it, never once considering how in the world she  was to get out again.</p> </div> <div class ="page" > <h2>Page 3 </h2> <script type ="text/javascript"> writePageControls();</script> <p>'Well!' thought Alice to herself, 'after such a fall as this, I shall think nothing of  tumbling down stairs …</p> </div> <div class ="page" > <h2>Page 4 </h2> <script type ="text/javascript"> writePageControls();</script> <p>Down, down, down. There was nothing else to do, so Alice soon began talking again …</p> </div> <div id ="footer"> <p>THE MILLENNIUM FULCRUM EDITION 3.0</p> </div></div> </body></html>


.var pageTotal =4;

In the <head> of that document, you will need to specify the number of page layers contained on that page as a JavaScript variable named pageTotal.


<script src ="pageControls.js" type="text/javascript"></script>

Import your external JavaScript from Step 1.


<link rel ="stylesheet" href="pageControlStyles.css" type="text/css" media ="screen" />

Link to your external style sheet from Step 6.



In the <body> tag, add an onload event handler that will flip to the first page using the pageJump() function from Step 5.


<div class ="page" >…</div>

Finally, add your page content within the body, giving each layer the .page class from Step 7 and a unique ID (page1, page2, page, etc…).


<script type = "text/javascript">…</script>

Before the content but after the page header, add a <script> tag.



Within the <script> tag from Step 15, include a function call for the writePageControls() from Step 3. This will place the correct pagination controls for each layer.


  • Using a single file with its content split between multiple page layers also makes the job of printing all the content a lot easier than if we had split it across multiple HTML files. It also lets us have a single URL, which provides users a quick and easy way to send the file to friends.

  • One little trick I used in the code to avoid having to create graphic arrows, was to use the HTML character entities for the left (&larr;) and right (&rarr;) arrow symbols.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: