Print Templates, Part VI: Interactive Margin Settings: Initializing the Print Template - Doc JavaScript

Print Templates, Part VI: Interactive Margin Settings

Initializing the Print Template

The first thing we need to do is to place the four margin markers and the fifth invisible marker for the pixels-per-inch ratio. Here is the HTML definition:

<IMG ID="mmarkerLeft" CLASS="mmarker" SRC="marginlr.gif"
  WIDTH="10" HEIGHT="10" BORDER="0">
<IMG ID="mmarkerRight" CLASS="mmarker" SRC="marginlr.gif"
  WIDTH="10" HEIGHT="10" BORDER="0">
<IMG ID="mmarkerTop" CLASS="mmarker" SRC="margintb.gif"
  WIDTH="10" HEIGHT="10" BORDER="0">
<IMG ID="mmarkerBottom" CLASS="mmarker" SRC="margintb.gif"
  WIDTH="10" HEIGHT="10" BORDER="0">
<IMG ID="ratiomarker" CLASS="mmarker"
  STYLE="visibility:hidden;left:1in;top:1in"
  SRC="margintb.gif" WIDTH="10" HEIGHT="10" BORDER="0">

Notice that only the invisible marker is set in position above. The other four visible markers will be set in place by InitMMarkers(). The init() function is invoked upon loading the page. Here is the BODY tag:

<BODY ONLOAD="Init()" ONRESIZE="ResizeApp()" SCROLL="no">

We first set the three event handlers for the onmousedown, onmouseup, and onmousemove events. One way would have been to assign three identical event handlers to each of the four margin markers. Instead, we can assign just three event handlers to the document object and then figure out inside the event handler which marker had triggered the event. Here are the three event handlers assignments:

document.attachEvent("onmousedown", MouseDownHandler);
document.attachEvent("onmouseup", MouseUpHandler);
document.attachEvent("onmousemove", MouseMoveHandler);

The rest of the init() function is similar to that of Column 94, except for the call to InitMMarkers() that initializes the margin markers. Here is the complete init() function:

function Init()
{
    document.attachEvent("onmousedown", MouseDownHandler);
    document.attachEvent("onmouseup", MouseUpHandler);
    document.attachEvent("onmousemove", MouseMoveHandler);
    AddFirstPage();
    zoomcontainer.style.zoom = "83%";
    ui.style.width = document.body.clientWidth;
    ui.style.height = "40px";
    pagecontainer.style.height = document.body.clientHeight -
      ui.style.pixelHeight;
    oMasterStyleClass = FindStyleRule(".masterstyle");
    oContentStyleClass = FindStyleRule(".contentstyle");
    oHeaderStyleClass = FindStyleRule(".headerstyle");
    oFooterStyleClass = FindStyleRule(".footerstyle");
    oMMarkerClass = FindStyleRule(".mmarker");
    InitClasses();
    InitMMarkers();
}

And here is the function that positions the markers:

function InitMMarkers()
{
    mmarkerLeft.style.top = oContentStyleClass.style.marginTop;
    mmarkerRight.style.top = oContentStyleClass.style.marginTop;
    mmarkerLeft.style.left = oContentStyleClass.style.marginLeft;
    mmarkerRight.style.left = (printer.pageWidth -
      printer.marginRight)/100 + "in";
    mmarkerTop.style.top = oContentStyleClass.style.marginTop;
    mmarkerBottom.style.top = (printer.pageHeight -
      printer.marginBottom)/100 + "in";
    mmarkerTop.style.left = oContentStyleClass.style.marginLeft;
    mmarkerBottom.style.left = oContentStyleClass.style.marginLeft;
    mmarkerLeft.style.pixelTop -= 2;
    mmarkerLeft.style.pixelLeft += 6;
    mmarkerRight.style.pixelTop -= 2;
    mmarkerRight.style.pixelLeft += 5;
    mmarkerTop.style.pixelTop += 6;
    mmarkerTop.style.pixelLeft -= 2;
    mmarkerBottom.style.pixelTop += 5;
    mmarkerBottom.style.pixelLeft -= 2;
}

Notice that we first position them on the margins directly, and then we shift them to the right, left, up, or down, by 2 to 6 pixels. Also notice the computations involving the printer object above. Since this is a printtemplate object, its properties are stored in multiples of 100th of an inch. If the page width is 8.26 inches, for example, printer.pageWidth will be 826.

Next: How to write the mousedown event handler

URL: https://www.webreference.com/js/column95/3.html

Print Templates, Part VI: Interactive Margin Settings: Initializing the Print Template - Doc JavaScript

Print Templates, Part VI: Interactive Margin Settings

Initializing the Print Template

Find a programming school near you