20

I would like to know how zoom property can be controlled through javascript, like div.style.top , how to specify for zoom ?

sat
  • 40,138
  • 28
  • 93
  • 102
  • It doesn't exists it seems. Here's a table with (I think all) css properties to javascript. http://codepunk.hardwar.org.uk/css2js.htm – Robin Jan 08 '10 at 08:30
  • Thanks for the link , useful . unfortunately no zoom as u have mentioned! – sat Jan 08 '10 at 08:48

3 Answers3

38

The Firefox & Chrome (Webkit) equivalents to the IE-specific zoom property are, respectively, -moz-transform and -webkit-transform.

A sample code would be:

.zoomed-element {
    zoom: 1.5;
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

You'd have to be a bit more careful with Javascript (test for existence first), but here's how you'd manipulate them:

el.style.zoom = 1.5;
el.style.MozTransform = 'scale(1.5)';
el.style.WebkitTransform = 'scale(1.5)';
K Prime
  • 5,809
  • 1
  • 25
  • 19
  • el.style.zoom = 1.5; Works cool, I was giving value in wrong way !, What are the acceptable numbers for zoom ?? Is it between 1 to 2 and if I mention 1.5 is it 150 % ? – sat Jan 08 '10 at 09:07
  • 1
    I'm not sure if zoom levels are limited. And yes, 1.5 => 150% – K Prime Jan 08 '10 at 09:12
  • 1
    1 == 100%, you can go beyond 2. – Tracker1 Jan 08 '10 at 09:33
  • I am using above suggestion, now how to zoom back to original size ? lil confused here , documentation says have to use value less than 1 to zoom out , and how to scale back to original size ?? – sat Jan 08 '10 at 14:31
  • 3
    Update: **`zoom` is also a valid Chrome CSS property.** – Rob W Feb 12 '12 at 18:34
  • 1
    [IE9 supports transforms](http://msdn.microsoft.com/en-us/ie/hh393506): `-ms-transform: scale(1.5);`. It works better than `zoom`; when comparing the results between IE9 and Chrome - it's not the same. (IE and Chrome handled `` margins different with `zoom`, so went with `-*-transform`. IE versions before 9 bring other problems, had to disable the zooming feature. [There are workarounds.](http://stackoverflow.com/questions/7805870/css3-transformscale-in-ie)) – Joel Purra Jun 05 '12 at 20:23
  • **As of 2016, the first part of this answer is completely incorrect.** `zoom` and `transform: scale` are separate CSS properties and with _entirely_ different effects, including different x/y coordinates calculation when interacting with zoomed elements from Javascript, different drag-and-drop image snapshots, and different layout positioning. Zoom imitates [browser zooming](http://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css) on a certain element and affects layout, transform-scale applies a scaling _after_ the element has been rendered and positioned into the layout. – John Weisz Jul 18 '16 at 17:43
3

It is a property of style, but it's not supported by all browsers. It's a non-standard Microsoft extension of CSS that Internet Explorer implements. It is accessed like this:

div.style.zoom
zombat
  • 92,731
  • 24
  • 156
  • 164
  • I mainly test in Safari , In safari if I give zoom value in css style, it works but not div.style.zoom=200% or 200+"%" or 200 or "200%". – sat Jan 08 '10 at 08:46
  • zoom is a non-standard property, so the webkit engine doesn't recognize it. – zombat Jan 08 '10 at 08:52
2

You might want to try a lightweight jQuery plugin called Zoomoz. It uses CSS3 transform properties (translate, rotate, scale). Check out the "Zooming the jQuery way section. Hope it helps.

$(document).ready(function() {
    $("#element").zoomTarget();
});
juanpaulo
  • 1,424
  • 1
  • 9
  • 3