I would like to know how zoom property can be controlled through javascript, like div.style.top , how to specify for zoom ?
2
-
It doesn't exists it seems. Here's a table with (I think all) css properties to javascript. codepunk.hardwar.org.uk/css2js.htmRobin– Robin2010-01-08 08:30:36 +00:00Commented Jan 8, 2010 at 8:30
-
Thanks for the link , useful . unfortunately no zoom as u have mentioned!sat– sat2010-01-08 08:48:34 +00:00Commented Jan 8, 2010 at 8:48
Add a comment
|
3 Answers
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)';
7 Comments
sat
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 % ?
K Prime
I'm not sure if zoom levels are limited. And yes, 1.5 => 150%
Tracker1
1 == 100%, you can go beyond 2.
Rob W
Update:
zoom is also a valid Chrome CSS property.
Joel Purra
IE9 supports transforms:
-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 <body> margins different with zoom, so went with -*-transform. IE versions before 9 bring other problems, had to disable the zooming feature. There are workarounds.) |
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
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();
});
