zoom css/javascript
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)';
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();
});