jQuery zoom with all browers

Well all browsers can do the same, except for Firefox. Wired, indeed! However this zoom script works in IE, Firefox,Chrome,Safari.

jQuery(document).ready(function() {
    var currFFZoom = 1;
    var currIEZoom = 100;

    jQuery(".make_greater").click(function(){
        var step;
        //only firefox sux in this case
        if (jQuery.browser.mozilla){
            step = 0.05;
            currFFZoom += step;
            jQuery('.maincontent').css('MozTransform','scale(' + currFFZoom + ','+ currFFZoom + ')');
            jQuery('.maincontent').css('transform-origin','0 0');
        }
        else
        {
            step = 5;
            currIEZoom += step;
            jQuery('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

    jQuery(".make_smaller").click(function(){
        var step;
        //only firefox sux in this case
        if (jQuery.browser.mozilla){
            step = 0.05;
            currFFZoom -= step;
            jQuery('.maincontent').css('MozTransform','scale(' + currFFZoom + ','+ currFFZoom +')');
            jQuery('.maincontent').css('transform-origin','0 0');
        }
        else
        {
            step = 5;
            currIEZoom -= step;
            jQuery('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });
});
jquery zoom source
jquery zoom

8 thoughts on “jQuery zoom with all browers

  1. Hey Mario, thanks, but cold you show how can I use this on my HTML doc? Thanks.

    You could send me a e-mail if you can, or anyone?

  2. i applied this code working fine in all browsers but i got issue in chrome.

    issue: text appending with each other text but working fine in all other browsers. how do i overcome this issue in chrome.

  3. Nice but it doesn’t seem to affect all styles on the ipad yet does on a desktop browser. Can’t seem to find a pattern as to why.

  4. Great solution! That helped me so much. I just needed to add ‘transition’: ‘transform 0.5s’ to make it perfect. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *