0

I have a div which contains some html content like text and a table, by using jQuery or any other tool I need to make that html content zoom in & out.

I've tried below code, but it is not working in Firefox.

HTML

<input type="button" id="zoomin" value="+" onclick="return ZoomIn();">
<input type="button" id="zoomout" value="-"  onclick="return ZoomOut();"> 
<div class="imgBox" id="imgBox" style="zoom: 100%;">
//My content
</div>

JS

function ZoomIn() {
    var ZoomInValue = parseInt(document.getElementById("imgBox").style.zoom) + 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomInValue;
return false;
}

function ZoomOut() {
var ZoomOutValue = parseInt(document.getElementById("imgBox").style.zoom) - 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomOutValue;
return false;
}

The code above is working in Chrome & IE but not in Firefox. What is the fix for this? Thanks.

Mahj
  • 35
  • 3
vamsi
  • 1,488
  • 3
  • 28
  • 66
  • possible duplicate of [css - How can I zoom a
    in Firefox and Opera](http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera)
     – Gabriel L. Nov 06 '13 at 14:03

1 Answers1

0

Firefox doesn't support the zoom property: http://www.browsersupport.net/CSS/zoom

The following is an example of what's needed achieve a similar effect in FF with CSS:

-moz-transform: scale(4);

You can apply this with JS using something like:

document.getElementById("imgBox").style.MozTransform = 'scale(4)';
Stuart Kershaw
  • 16,831
  • 6
  • 37
  • 48