Access browser's page zoom controls with javascript

Question

I want to assign the browser\'s (IE/FF) page zoom controls (Menu: View/Zoom/Zoom In_Zoom Out) to two large \"(+)(-)\" icons on the web page

Answer 1

Can't be done at all as far as I know. As has been discussed elsewhere on SO, it is possible to detect the browser's zoom level using a number of tricks. There's no way to set them from plain JavaScript.

Maybe in a Firefox extension.

Related:

• Catch browser’s “zoom” event in JavaScript
• Changing the browser zoom level
• How to detect page zoom level in all modern browsers?

Answer 2

This is how I do something similar in jQuery:

I made it up last night and tested on IE7, IE8, FF3.6, Safari 5, Chrome 10, and more.

I have a banner that overflows when people zoom out on some browsers. So I check the width of my .nav. If it wraps it will be shorter that its full width.

   $(function() {

        //launch doZoomCheck on load
        doZoomCheck();

        $(window).resize(function() {
            // .resize ALSO fires when people change the zoom of their browser.
            doZoomCheck();
        });

        function doZoomCheck() {
              var width = $(".nav ul").width();
              // if the width of the banner isn't near 976 is prolly overflowing
              if ( width > 976) {
                     // change to narrow font so menu doesn't wrap funny
                     $(".nav ul li a, #footer .frankmed").css("font-family", "Arial Narrow");
              }
                 // if width is back to normal change the font back
              if ( width < 976) {
                 // remove special styles when zoomed back out
             $(".nav ul li a").attr('style','');
             }
        }
  });

I'm using jQuery 1.5, prolly works back to 1.3.2 but haven't checked.

Please note: My font size is 20px already so Arial Narrow is very legible at that size. I am not stopping the user from changing the font size. I am not overriding it. I am just changing a font. Do not use this script for evil. Don't be stupid. Accessibility is important.

Answer 3

You should be able to set the CSS3 Transform property using JavaScript to scale content. This won't be tied to the web browser zoom functionality though.