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. Thanks, it is very helpful and this also works nice in iPad and Tab. Thanks Man.

  2. 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?

  3. 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.

  4. 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.

  5. Seems it doesn’t like font-weight style being applied on the ipad. Bit annoying.

  6. 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 *