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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

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

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business