home / experts / javascript / column95 |
   |
|
|
|
<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
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
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/3.html
