Print Templates, Part VI: Interactive Margin Settings: General Flow - Doc JavaScript

Print Templates, Part VI: Interactive Margin Settings

General Flow

The print template we present in this column, template8.html, is an extension of the print template we introduced in Column 94 (Print Templates, Part V: Re-pagination), template7.html. We demonstrate here a user interface that gives the user visual control over the margin settings, on all four sides of the page. To change the settings, we add four markers that the user can move to reflect the new desired margin. Two markers are positioned at the top left corner. They are used to set the top and left margins. One marker is positioned at the top right corner, for setting the right margin. The last marker is set at the bottom left corner for setting the bottom margin. Load template8.html (from the zip file) into the Microsoft Print Template Display. (See Column 91 for an explanation of the Microsoft Print Template Display application.) Play around with the markers, and see how the margin changes affect the pagination. A fifth marker is also added to determine the pixels per inch ratio.

The general flow is similar to what we described in Column 94. The added functionality in this column is for handling these four new markers. First, we need to set them in their initial positions, aligned with the top, left, right, and bottom margins. Then we define three new event handlers, which handle the markers' movement. The MouseDownHandler() pops up a tool tip next to a clicked marker, and prints the margin value inside the popup element. The MouseMoveHandler() detects the mouse movement across the window, and changes the marker position to the mouse's position. During this movement, the event handler also updates the margin value inside the tool tip. While moving the mouse, the user can easily decide when to drop the marker. The tool tip contains the new margin as long as the mouse button is held down. The MouseUpHandler() handles the event of dropping a marker. It has two major assignments: update the relevant margin that the user wanted to change, and hide the tool tip that showed the margin value.

The four Margin Markers are mmarkerLeft, mmarkerRight, mmarkerTop, and mmarkerBottom. Each marker has a status flag showing whether the marker has started moving (mouse button is pressed). They are bMoveMMarkerLeft, bMoveMMarkerRight, bMoveMMarkerTop, and bMoveMMarkerBottom.

There are four visible markers to drag the margins around. The fifth marker, ratiomarker, is invisible. We use it to get the pixels-per-inch ratio. We position it one inch below and and one inch to right of the top left corner. The ratio is determined by getting the marker's offset in pixels. If, for example, its offsetLeft is 98, it means there are 98 pixels per inch. Here is a statement you'll find a few times:

iPixelToInchRatio = ratiomarker.offsetLeft;

Next: How to initialize the print template

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: November 22, 2001
Revised: November 22, 2001

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