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: | | 1. | pageControls.js 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(' '); } if (pageCurrent!=pageTotal) document.writeln (' | <a href="#" onclick ="pageTurn( \'next\')">next →</a>'); else document .writeln (' | next →'); 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) objPage.style.display = 'none'; pageName = 'page' + pageCurrent; objPage=document.getElementById(pageName); objPage.style.display = 'block'; } function pageJump (pageName) { if(!pageName) pageName =1; if (objPage) objPage.style.display = 'none'; pageCurrent = pageName; pageName = 'page' + pageCurrent; objPage=document.getElementById(pageName); objPage.style.display = 'block'; } | | 2. | var pageCurrent = 1; Initialize two variables:
| | | 3. | 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.
| 4. | function pageTurn (direction) {…} The pageTurn() function uses a variable called direction to determine whether to go to the previous (prev) or next page layer.
| 5. | function pageJump (pageName) {…} The pageJump() function takes you directly to the page passed to it through the variable pageName.
| 6. | pageControlStyles.css 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; } | | 7. | .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.
| 8. | .toolBar {…} The .toolBar class is used to style the pagination controls.
| | | 9. | index.html 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." | | | 10. | .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.
| 11. | <script src ="pageControls.js" type="text/javascript"></script> Import your external JavaScript from Step 1.
| 12. | <link rel ="stylesheet" href="pageControlStyles.css" type="text/css" media ="screen" /> Link to your external style sheet from Step 6.
| 13. | onload="pageJump(1);" In the <body> tag, add an onload event handler that will flip to the first page using the pageJump() function from Step 5.
| 14. | <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…).
| 15. | <script type = "text/javascript">…</script> Before the content but after the page header, add a <script> tag.
| 16. | writePageControls(); 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.
| Tips 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 (←) and right (→) arrow symbols. |