Print Templates, Part VI: Interactive Margin Settings: The onmousemove Event Handler - Doc JavaScript

Print Templates, Part VI: Interactive Margin Settings

The onmousemove Event Handler

The function MouseMoveHandler() handles all mousemove events. It finds the relevant marker from a flag set earlier by the MouseDownHandler() function: bMoveMMarkerLeft, bMoveMMarkerRight, bMoveMMarkerTop, or bMoveMMarkerBottom. Before handling the specified case, the function determines a zoom compensation factor, either in the x (fZoomCompensationX) or y (fZoomCompensationY) direction. The need for compensation stems from the fact that the pixels-per-inch conversion assumes a zoom factor of 1.0. When you move the mouse 1 inch, the browser measures 1 inch. It does not know that there is a zoom factor to compensate for. When the zoom factor is less than 1.0, we need to oversize the mouse movement by (1/fZoomNum -1). If, for example, the zoom factor is 0.5 and the mouse moves 1.0 inch on the screen, we need to compensate the tool tip position by the mouse movement multiplied by (1/0.5-1) or by 1. When the zoom factor is 1.0, the compensation is 0.0 and the marker position is equal to the mouse position.

Let's take a look at the function's section that deals with the left margin marker:

if (bMoveMMarkerLeft) {
  if (event.x + iDeltaX + fZoomCompensationX >=
    mmarkerRight.offsetLeft - 10) return false;
  if (event.x + iDeltaX + fZoomCompensationX
    <= iPixelToInchRatio
    * printer.unprintableLeft/100 + 5) return false;
  mmarkerLeft.style.left = event.x + iDeltaX +
    fZoomCompensationX;
  theText = Math.round((100 * (mmarkerLeft.offsetLeft -
    5))/iPixelToInchRatio)/100;
  oPopupBody.innerHTML = theText + " in";
}

In all computations we add iDeltaX which is the difference between the marker location and the mousedown event location. It is computed by the MouseDownHandler() function:

iDeltaX = (mmarkerLeft.offsetLeft - event.x);

On each incremental move, we need to check that the margin is still legal, and exit if not. The first check is for the page to be at least 10 pixels wide:

if (event.x + iDeltaX + fZoomCompensationX >=
   mmarkerRight.offsetLeft - 10) return false;

The second check is for the margin not to fall off the page. In the case of the left margin marker, we check that the marker is not closer than 5 pixels to the unprintable area. The templateprinter object's unprintableLeft property reflects the left boundary of the page, in multiples of one hundredth of an inch. We check that the margin is not closer than 5 pixels to it:

if (event.x + iDeltaX + fZoomCompensationX 

After these checks, we set the tool tip position:

mmarkerLeft.style.left = event.x + iDeltaX + fZoomCompensationX;

We then compute the margin in inches, as in MouseDownHandler():

theText = Math.round((100 * (mmarkerLeft.offsetLeft -
  5))/iPixelToInchRatio)/100;

And finally we update the innerHTML of the tool tip:

oPopupBody.innerHTML = theText + " in";

Next: How to write the mouseup event handler

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/5.html