Increasing and decreasing scale of the page with jQuery

Question

I've created two buttons in my html code

<a href="#" class="increase">+</a>
<a href="#" class="decrease">-</a>

what i want to do is to click in the buttons and scale the page

i developed a jquery script, but it only works on chrome

  $(".decrease").click(function () {
        $("body").css('zoom',function (index,value) {
            if(value < 0.8){
                return value;
            } else {
                return parseFloat(value) - 0.1;
            }
        });
  });

  $(".increase").click(function () {
        $("body").css('zoom',function (index,value) {
            if(value > 1.2){
                return value;
            } else {
                return parseFloat(value) - 0.1;
            }
        });
  });

can anyone help me?

thanks

You can't really "zoom in" or "zoom out" in most common browers. All you can do is change the zoom level of your CSS, and there are many topics about it in SO. — ChoiBedal, Aug 21 '14 at 14:04
i actually want to change the zoom property in css, but it only works on chrome — programmer-bigwoods, Aug 21 '14 at 14:05

score 1 · Answer 1 · answered Aug 21 '14 at 14:14

1

See here jsfiddle - http://jsfiddle.net/1totyrhj/

This variant will work in all modern browsers.

JavaScript

(function () {
    var currentScale = 1,
        cssPrefixesMap = [
            'scale',
            '-webkit-transform',
            '-moz-transform',
            '-ms-transform',
            '-o-transform',
            'transform'
        ];

    function setScale(scale) {
        var scaleCss = {};

        cssPrefixesMap.forEach(function (prefix) {
            scaleCss[prefix] = 'scale(' + scale + ')';
        });

        $('div').css(scaleCss);
    }

    $(".decrease").click(function () {
        setScale(currentScale = currentScale - 0.1);
    });

    $(".increase").click(function () {
        setScale(currentScale = currentScale + 0.1);
    });
})();

answered Aug 21 '14 at 14:14

Eugene Obrezkov

2,910
2
17
34

it does not look good as zoom, i tried to change $('div').css(scaleCss); to $('html').css(scaleCss); but it still doesnt look good – programmer-bigwoods Aug 21 '14 at 14:25
Of course, it doesn't. When you change it to ```html``` or ```body``` it will scale all content with your controls too. – Eugene Obrezkov Aug 21 '14 at 14:26
scale() behaves different from zoom? – programmer-bigwoods Aug 21 '14 at 14:31
@user3722632 yes, you can read about this by searching "scale vs zoom". You will get many articles about this. – Eugene Obrezkov Aug 21 '14 at 16:49

score 0 · Answer 2 · edited May 23 '17 at 12:01

There's a load of ways browsers handle CSS zooming, for example when doing a x2 zoom:

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

You'll need a way to handle them all. (Property list shamelessly stolen from this thread: complete styles for cross browser CSS zoom)

score 0 · Answer 3 · answered Aug 21 '14 at 14:09

Change your class for an ID, and then try this out :

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#increase').on('click',function(){
        if ($.browser.mozilla){
            if(currFFZoom < 1.2)
            {
            var step = 0.2;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
            }
        } else {
            if(currIEZoom < 120)
            {
            var step = 20;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }}
    });

    $('#decrease').on('click',function(){
        if ($.browser.mozilla){
             if(currFFZoom > 0.8)
            {
            var step = 0.2;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')'); }

        } else {
            if(currIEZoom > 80)
            {
            var step = 20;
            currIEZoom -= step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
            }
        }
    });

EDIT : Adapted to block after a certain amount of scale (Min/max).

i get this error Uncaught TypeError: Cannot read property 'mozilla' of undefined (index):635 — programmer-bigwoods, Aug 21 '14 at 14:14

Increasing and decreasing scale of the page with jQuery

3 Answers3