Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Test Drive
To help you test the concepts presented in this article, I’ve set up three test pages:
- A simple HTML page with no layout
- A page based on CSS-layout, where all the relevant content resides within a DIV tag.
- A page with table-based layout in which all the content to be paginated is within a single table cell
All pages contain a variety of HTML elements (P, PRE, and BLOCKQUOTE tags as well as an embedded TABLE). Of all three pages, the simple HTML page is the most difficult to transform, as there is no obvious end of the paginated content. The endOfContent function is thus redefined to check for the HR tag followed by a P tag with known content (see Listing 2).
Listing 2 More complex end-of-content function.
function endOfContent(e) {
if (!e) return true; // end of content
if (e.nodeType != 1) // not TAG node, obviously
return false; // not at the end
if (e.tagName.toLowerCase() != "hr")
return false; // not at the horizontal line
// find next tag node
var nxt = nonEmptyNextSibling(e,1);
if (nxt.tagName.toLowerCase() != "p")
return false; // not a paragraph after a HR
// Check the actual copyright text
return nxt.innerHTML == "(C) Copyright 2006";
}
The pagination routine (defined in a JavaScript library) is started manually with a button in the left sidebar. The page style used for the created DIV tags has red borders so you can identify the results of the transformation easily.
To test the pagination code on your examples, download the test pages and the JavaScript library to your local web server (Internet Explorer might complain if you try to execute JavaScript code from local files), adapt the support functions to your needs, and use a JavaScript debugger to step through the code. After you have created successful paged DIVs in your browser, integrate the results with the screen/print/email routines.