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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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 >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint