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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

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.


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, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji