- 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
Adding a Print Control
Although Web browsers always include a print control (either as a button or in a menu), most Web sites that present articles and other lengthy content also provide a conveniently positioned print control directly on the page. However, the layout and design you use onscreen and the one you want to print onto white paper might not be the same. Not only should you change the colors (especially if you are using a dark background on the screen) but you also should remove objects from the page such as navigation and controls that serve no purpose on the printed page.
Reopen the pageControl.js file. In the writePageControls() function add the following code immediately after the pagination layer to add the print control:
document.writeln (’<div class="pageSend">’); document.writeln (’<a href="javascript:window.print()">Print</a> | ’); document.writeln (’</div>’);
Start a new CSS file and save it as css/print.css. This version of your styles will be used when the page is printed out. Add the page class, but define it as a block display this time so that all the page layers will be printed. Make sure to include the !important statement. This process ensures that layers that have been hidden show up when sent to the printer.
.page { display: block !important; }
Now set the other styles for your printed Web page. You generally want to go with black text on a white background. I also set the links to appear as normal text.
body { padding: 0px;
margin: 16px;
color: #000;
font: 12pt/1.2 "Times New Roman", Times, serif;
background:#fff;}
a { text-decoration: none;
color: black }
#content { display: block;}
Finally, set the footer styles as desired. You want to set the pageInfo and copyright classes to display, but you can set the toolbar and navigation classes to disappear from the printed version.
#footer { display: block;
border-top: 1px solid #333;
padding-top: 2px;
margin-bottom: 8px;
clear: both;}
#footer .pageInfo, #footer .copyright { display: block;}
.toolBar, .navigation { display: none;}
Back in the HTML file add a link to the print version of your CSS. It is important to place this link BEFORE the link to the screen CSS so that older browser (which might not recognize the print media type) will still display correctly.
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
Load the page into a browser window and click the print control. The standard print dialog screen appears. Click Print and the page is on its way to the printer (see Figures 3 and 4).
)
Figure 3 On the screen the page looks very different...
Figure 4 ...than when it is output on a printer.