Home > Articles > Web Development

  • Print
  • + Share This
Like this article? We recommend

Test Drive

To help you test the concepts presented in this article, I’ve set up three test pages:

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.

  • + Share This
  • 🔖 Save To Your Account