October 5, 2001 - Dimensionless Zoom Factors | WebReference

October 5, 2001 - Dimensionless Zoom Factors

Yehuda Shiran October 5, 2001
Dimensionless Zoom Factors
Tips: October 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

In Internet Explorer 6 and above, the style object's zoom property can be either a number or a string. The numeric option represents a magnifying factor. A zoom factor of 1 means a normal size. A zoom factor of 2, for example, means an element sized by 2x. A zoom factor of 0.5 will make an element half its original size. Play around with the following text box and see its effect on the text element below it ("Have you read our columns about Print Templates?"):

X

Have you read our columns about Print Templates?
When the zoom property is a string, it should end up with the percent ("%") character. In this case, the semantics are clear. The number represents the zoom factor in percents. A normal size is achieved by a 100% zoom factor. Specify 200% and you'll get the element twice as large. Change it to 50% and you'll end up with an element half its original size. Play around with the following text box and observe the effect of the zoom factor on the element below:

%

Have you read our columns about Print Templates?
Here is the code for the first zoom factor specification above (no "%"):

<INPUT ID="zoomfactor1" TYPE="text" VALUE="50" SIZE="3" 
       MAXLENGTH="4" onkeyup="updateZoom1()">%
<DIV ID="container1">
Have you read our columns about Print Templates?
</DIV></P>
<SCRIPT LANGUAGE="JavaScript">
<!--
function updateZoom1() {
  if (event.keyCode != 13) return;
  container1.style.zoom = zoomfactor1.value;
}
// -->
</SCRIPT>
Notice we do not append the percent sign when assigning the zoom property.