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

Print Templates, Part VI: Interactive Margin Settings

The onmousedown Event Handler

The function MouseDownHandler() handles all events of mousedown. After verifying that indeed the left button was pressed

if (event.button != 1) return;

the function first computes two numbers: the zoom factor and the pixels-per-inch ratio. The style object's zoom property is stored as a string, ending with the "%" character. To convert it to a pure factor, we need to strip the last character, convert to a number, and then divide by 100:

sZoomNum = zoomcontainer.style.zoom;
sZoomNum = sZoomNum.substring(0, sZoomNum.length - 1);
iZoomNum = sZoomNum.valueOf(sZoomNum, 10);
fZoomNum = iZoomNum/100;

We then find the element that triggered the event:

sSrcID = event.srcElement.id;

And then we find the pixels-per-inch ratio:

iPixelToInchRatio = ratiomarker.offsetLeft;

The function then handles four different cases, by checking the following if statements:

if (sSrcID == "mmarkerLeft")
if (sSrcID == "mmarkerRight")
if (sSrcID == "mmarkerTop")
if (sSrcID == "mmarkerBottom")

Let's focus on the left margin marker, mmarkerLeft. We first compute four variables that we are going to use in the MouseMoveHandler() function:

bMoveMMarkerLeft = true;
iStartingX = event.x;
iDeltaX = (mmarkerLeft.offsetLeft - event.x);
iDeltaY = 0;

Then we create the tool tip with the window object's createPopup() method:

oPopup = window.createPopup();

We want to display inside the tool tip the position of the left margin marker. We subtract five pixels to account for the offset between the marker and the margin itself (as we have initialized it). We then want to display only two digits after the decimal point. We can do it by multiplying the number by 100, rounding it to the closest integer, and dividing again by 100:

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

We populate the innerHTML property of the tool tip, oPopup, with the new number, concatenated with the " in" symbol for "inches." We then take care of the style object's other properties:

oPopupBody.style.backgroundColor = "#ffff66";
oPopupBody.style.border = "1 solid black";
oPopupBody.style.fontSize = "12px";
oPopupBody.style.fontFamily = "Courier New";

And finally we show the tool tip with the show() method. We need to make sure to multiply its coordinates by the zoom factor and pass them as the first two parameters of show(). The next two parameters are the tip's width (60) and height (16), and its last parameter is the element to which the coordinates are related (zoomcontainer):

oPopup.show(fZoomNum * (mmarkerLeft.offsetLeft + 5), 
  fZoomNum * (mmarkerLeft.offsetTop - 20), 60, 16, zoomcontainer);

Here is the whole section for the left margin marker:

if (sSrcID == "mmarkerLeft") {
  bMoveMMarkerLeft = true;
  iStartingX = event.x;
  iDeltaX = (mmarkerLeft.offsetLeft - event.x);
  iDeltaY = 0;
        
  oPopup = window.createPopup();
  oPopupBody = oPopup.document.body;
  theText = Math.round((100 * (mmarkerLeft.offsetLeft - 
    5))/iPixelToInchRatio)/100;
  oPopupBody.innerHTML = theText + " in";
  oPopupBody.style.backgroundColor = "#ffff66";
  oPopupBody.style.border = "1 solid black";
  oPopupBody.style.fontSize = "12px";
  oPopupBody.style.fontFamily = "Courier New";
  oPopup.show(fZoomNum * (mmarkerLeft.offsetLeft + 5), 
    fZoomNum * (mmarkerLeft.offsetTop - 20), 60, 16, zoomcontainer);
        
  return;
}

The sections for the other markers are not that much different. After handling the event, the function sets the source element to null:

sSrcID = null;

Next: How to write the mousemove 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/4.html