October 3, 2001 - Zooming In and Out On Line | WebReference

October 3, 2001 - Zooming In and Out On Line

Yehuda Shiran October 3, 2001
Zooming In and Out On Line
Tips: October 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

You can control the zoom factor of an element online. A 100% zoom factor means the element will be displayed in its normal size. A larger zoom factor creates the impression of zooming in. A less-than-100% zoom factor displays the element zoomed out. Play around with the following zoom factor, and see its effect on the element beneath ("Have you read our columns about Print Templates?").

%

Have you read our columns about Print Templates?
The above demo includes a text box for the zoom factor entry, a DIV element for the sentence ("Have you read our columns about Print Templates?"), and an onkeyup event handler in JavaScript. Whenever the user enters a digit in the text box, the zoom factor is being updated after he or she releases that key. Here are the definitions:

<INPUT ID="zoomfactor" TYPE="text" VALUE="50" SIZE="3" MAXLENGTH="4" onkeyup="updateZoom()">%
<DIV ID="container">
Have you read our columns about Print Templates?
</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
function updateZoom() {
  container.style.zoom = zoomfactor.value + "%";
}
// -->
</SCRIPT>
This tip works on IE 6.0 and above.