"Zoom" a browser window/view with JavaScript?

Question

We can zoom in and out scrolling with pressing ctrl.

But I want to do that using jQuery or JavaScript. Is is possible?

Leave this up to the user. I can't think of any instance where you should do this, short of a browser plugin. — Brad, Mar 21 '12 at 03:45
Duplicate http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript — elclanrs, Mar 21 '12 at 03:47
It would be better to say why you want to detect zoom (it can be done a number of ways, not just using a scroll) since it's extremely unlikely you can do it reliably across browsers. — RobG, Mar 21 '12 at 04:04
@Brad One reason you might want to do it is in case you are displaying a very large organizational chart, and you want the user to be able to zoom in and out of the chart area without zooming the entire page. — bgmCoder, Aug 25 '14 at 18:35
@BGM That doesn't seem to be what the question is. But, if I were to set the zoom for only part of the page, I would zoom the canvas. If not using a canvas, use relative sizes and simply set the em size of the parent. — Brad, Aug 25 '14 at 19:49
I only added that because you said you can't think of any reason to zoom. I just wanted to give a reason why someone would want to. I'm sorry, maybe I misunderstood the scope... — bgmCoder, Aug 25 '14 at 19:54
@Brad — Leave this up to the programmer, for if _you_ cannot think of any instance, _he_ may —or, event better: can. — Brice Coustillas, Aug 07 '16 at 07:33
@BriceCoustillas Hopefully you're right, and in which case the poster should provide more detail. Otherwise, my suggestion fits most use cases, for the general question asked, and will hopefully help others who come across this question. — Brad, Aug 07 '16 at 07:47
@Brad I have users who can't figure out how to zoom, and want something obvious plunked at the top of the page. Totally legitimate question. I don't think a good question requires posting a justification for it. Maybe someone would like to do it just for the fun of it. Shouldn't matter. — , Aug 23 '18 at 13:53

score 11 · Answer 1 · answered Jun 23 '14 at 19:03

11

Since you have tagged in jquery also (though written only js in the question title) I would add this answer

You can add the following css to a webpage to zoom a browser window

body {
   -moz-transform: scale(0.8, 0.8);
   zoom: 0.8;
   zoom: 80%;
}

So your jquery becomes

$(document).ready(function(){
  $('body').css('zoom','80%'); /* Webkit browsers */
  $('body').css('zoom','0.8'); /* Other non-webkit browsers */
  $('body').css('-moz-transform',scale(0.8, 0.8)); /* Moz-browsers */
});

Dont worry about any cross-browser since any incomprehensible css property would be avoided by the browser.

answered Jun 23 '14 at 19:03

akki

2,021
1
24
35

Thanks a lot akki! Also, you dnt need that jQuery code. It can work with only CSS – amanuel2 Apr 30 '16 at 20:38
1

That's correct. But the question asks for a jQuery code, that's why :) – akki Dec 07 '19 at 06:43

score 5 · Answer 2 · answered Oct 26 '14 at 01:47

Checkout this jsfiddle. Something you may use but it's not exact function like browser zoom-in zoom-out.

$('#zoom-in').click(function() {
   updateZoom(0.1);
});

$('#zoom-out').click(function() {
   updateZoom(-0.1);
});


zoomLevel = 1;

var updateZoom = function(zoom) {
   zoomLevel += zoom;
   $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
}

Bogdanio · Answer 3 · 2015-04-16T12:04:48.623

Here is my solution using CSS transform: scale() and JavaScript / jQuery. This gets pretty close to browser zoom in / out:

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

<script>
    jQuery(document).ready(function($)
    {
        // Set initial zoom level
        var zoom_level=100;

        // Click events
        $('#zoom_in').click(function() { zoom_page(10, $(this)) });
        $('#zoom_out').click(function() { zoom_page(-10, $(this)) });
        $('#zoom_reset').click(function() { zoom_page(0, $(this)) });

        // Zoom function
        function zoom_page(step, trigger)
        {
            // Zoom just to steps in or out
            if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

            // Set / reset zoom
            if(step==0) zoom_level=100;
            else zoom_level=zoom_level+step;

            // Set page zoom via CSS
            $('body').css({
                transform: 'scale('+(zoom_level/100)+')', // set zoom
                transformOrigin: '50% 0' // set transform scale base
            });

            // Adjust page to zoom width
            if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
            else $('body').css({ width: '100%' });

            // Activate / deaktivate trigger (use CSS to make them look different)
            if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
            else trigger.parents('ul').find('.disabled').removeClass('disabled');
            if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
            else $('#zoom_reset').addClass('disabled');
        }
    });
</script>

score 4 · Answer 4 · edited Jun 05 '12 at 19:38

4

In IE:

alert(window.parent.document.body.style.zoom.toString());

and you can set the browser zoom

window.parent.document.body.style.zoom = 1.5;

edited Jun 05 '12 at 19:38

JoshL

10,737
11
55
61

answered Jun 05 '12 at 15:58

DRD

49
2

3

Gosh I thought you had it then - unfortunately, I think this is the css zoom property NOT the browser zoom - if you do this the two will oppose each other. For another thing, if you have media breakpoints they won't trigger for the zoomed sizes like the CTRL+ browser zoom will. – cirrus Sep 16 '14 at 08:51

"Zoom" a browser window/view with JavaScript?

4 Answers4

Linked