spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column95


Print Templates, Part VI: Interactive Margin Settings

Vice President of Risk Technology - READY TO HIRE! (NYC)
Next Step Systems
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


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 <= iPixelToInchRatio *
  printer.unprintableLeft/100 + 5) return false;

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


http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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

URL: http://www.webreference.com/js/column95/5.html