Print Templates, Part I: Writing a Dynamic Print Template(1) - Doc JavaScript

Print Templates, Part I

Writing a Dynamic Print Template(1)

You've probably asked yourself by now how to prepare the exact number of DeviceRect and LayoutRect elements for the source you want to format. You are also wondering how to create these elements without copying and pasting 100 times. The answer is the same for both. We can write JavaScript code that will create the DeviceRect and LayoutRect elements on the fly. Try it.

The key to dynamic creation of HTML statements is a <DIV> element that we fill on the fly. Here is how we define this element:

<DIV ID="devicecontainer">
<!-- Pages created on the fly go here. -->
</DIV>

We fill this <DIV> element using the insertAdjacentHTML() method. We use its two flavors, afterBegin and beforeEnd. We use the first flavor when we insert the first page into an empty </DIV>:

devicecontainer.insertAdjacentHTML
  ("afterBegin", newHTML);

We use the second variation of this method when we want to add successive pages before the end of the element:

devicecontainer.insertAdjacentHTML
  ("beforeEnd", newHTML);

We create the first page upon loading of the devicecontainer page:

<BODY ONLOAD="addFirstPage()">

The function addFirstPage() assembles the first page from the ingredients we showed previously in this column: one LayoutRect element within a DeviceRect element. The only trick is how to assemble these opening and closing tags in a single string variable, newHTML. Be strict with the quotes: use double quotes for newHTML's substrings and single quotes for original quotes in the LayoutRect and DeviceRect elements. Here is the function:

function addFirstPage() {
  newHTML  = "<IE:DEVICERECT ID='devicerect1'
    MEDIA='print' CLASS='masterstyle'>";
  newHTML += "<IE:LAYOUTRECT ID='layoutrect1'
             CONTENTSRC='2.html'" +
             "ONLAYOUTCOMPLETE='onPageComplete()'
             NEXTRECT='layoutrect2'" +
             "CLASS='contentstyle'/>";
  newHTML += "</IE:DEVICERECT>";
  devicecontainer.insertAdjacentHTML("afterBegin",
  newHTML);
}

Notice the new attribute of LayoutRect: onLayoutComplete. This event fires when the LayoutRect element stops rendering its content. The reason for this can be twofold: either the source is exhausted or the LayoutRect element is overflowed by a longer source. We'll show you how to differentiate between these two events on the next page.

Next: How to dynamically create the rest of the pages

URL: https://www.webreference.com/js/column89/6.html

Print Templates, Part I: Writing a Dynamic Print Template(1) - Doc JavaScript

Print Templates, Part I

Writing a Dynamic Print Template(1)

Find a programming school near you