Creating Web Pages for Screen, Print, and Email
- Adding Pagination Controls
- Adding a Print Control
- Adding an Email Control
- Automatic Pagination
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 that the user has to wait between page loads. Even more problematic is how to create a print-only version of an article whose text may be split between multiple files.
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 these page layers are in the same HTML file, but only one is showing at a time.
Using a single file with its content split between multiple page layers also makes the job of printing the entirety of the content a lot easier than if it were split across multiple HTML files and also allows a single URL, which can give the user a quick and easy way to send it to friends.
Adding Pagination Controls
Paginating the content of a single Web page involves creating several layers using the ID attribute with DIV tags to create (what we’ll call in this article) page layers, which appear to be distinct pages in the browser window, but are actually all contained within a single HTML file. 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 1 The pagination controls allow the reader to either go back and forth sequentially between pages or to jump to a particular page.
Start a new JavaScript file and save it as javascript/pageControlds.js. Add two variables—one for which page layer is currently being displayed (pageCurrent) and another to hold the object node for the current page layer (objPage) and set this to null for now.
var pageCurrent = 1; var objPage = null;
After the variables, add the function writePageControls(). This function dynamically 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 are grayed-out depending on the page layer. For example, the control for the previous page and the jump-to control for page 1 is grayed-out (not clickable) on the first page layer.
function writePageControls() {
document.writeln (’<div class="toolBar">’);
document.writeln (’<div class="pagination">’);
if (pageCurrent!=1) document.writeln (’<a href="javascript:pageTurn(\’prev\’)">← 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="javascript:pageJump(’+i+’)">’+i+’</a>’);
if (i!=pageTotal) document.write(’ ’);
}
if (pageCurrent!=pageTotal) document.writeln (’ | <a href="javascript:pageTurn(\’next\’)">next →</a>’);
else document.writeln (’ | next →’);
document.writeln (’</div>’);
document.writeln (’ <br clear="all"/></div>’);
if (pageCurrent==pageTotal) pageCurrent=1;
else pageCurrent++;
}
One little trick I used in the previous code to avoid having to create graphic arrows was to use the built-in HTML left (←) and right (→) arrow symbols.
The pageTurn() function uses a variable called direction to determine whether to go to the previous (prev) or next page layer.
function pageTurn(direction) {
if ((direction==’prev’) && (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’;
}
The pageJump() function takes you directly to the page passed to it through the variable pageName.
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’;
}
Save all the changes to your JavaScript file and then start a new CSS file and save it as css/screen.css. Add the page class to your style sheet, which is used to control the appearance of each page layer within the Web page. Set the initial display for the page class to none, which hides all the page layers when the page first loads.
.page { display: none; }
You can then add other styles to control the style of your page as it appears on the screen. Keep in mind, though, that this is not how your page will appear when printed. We’ll take care of that in the next section. For this page, I used a dark color scheme with gray text on a dark-gray background and light blue links.
body { padding: 0px;
margin: 16px;
color: #ccc;
font: small/1.2 Helvetica, Arial, Sans-serif;
background:#444;}
a { text-decoration: none;
color: RGB(153,204,255) }
#content { display: block;
width: 600px;}
You also need to include other classes to control the exact layout of the page. One important class to define is one that you can apply to navigation on the page. Having this class enables you to hide the navigation when the page is printed (as you will see in the next section).
.navigation { font-weight: bold; }
.toolBar { display: block;
font-weight: bold;
border-top: 1px solid #fff;
padding-top: 2px;
margin-bottom: 8px;
clear: both;}
.pagination { display: block;
float: left;}
.pageSend { display: block;
float: right;}
Finally, you need to set up classes to define the layout of the footer, including classes for a copyright message and how to treat the navigation class when it is in the footer:
#footer { display: block;
border-top: 1px solid #fff;
padding-top: 2px;
margin-bottom: 8px;
clear: both;}
#footer .copyright{ float: left;}
#footer .navigation{ float: right;}
In addition, the footer includes the page title and URL, but we want these to appear only when the page is printed, so we set that class so it is not displayed.
#footer .pageInfo { display: none;}
Start a new HTML file, which will contain your page layers, and save it as index.html (or whatever you want). In the head of that document, you have to specify the number of page layers contained on that page as a JavaScript variable named pageTotal:
<script type="text/javascript" language="javascript"> pageTotal=4; </script>
Now it’s time to add the functions you created previously in the external JavaScript file into the page:
<script src="javascript/pageControls.js" language="javascript" type="text/javascript"></script>
You also want to add a link to the version of your CSS used when the page is displayed on the screen (media="screen"):
<link rel="stylesheet" href="css/scren.css" type="text/css" media="scree" />
Initialize the page so the first page layer is showing:
<body onload="pageJump(1)">...</body>
Finally, manually add your page content within the body, giving each layer the page class and a unique ID (page1, page2, page3, and so on). Also include a function call for the writePageControls(), which places the correct pagination controls for each layer. (See Figure 2.)
<div class="page" id="page1"> <h2>Introduction</h2> <script type="text/javascript" language="javascript"> writePageControls(); </script> <p>Lorem ipsum dolor sit amet...</p> </div>
)
)