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 so that vision impaired visitors can use these controls conveniently.

A lot of searching for a suitable script came up empty so here I am.

Any code you know that will do this simply?

All the best...

Bob

Answer 1

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.

Answer 2

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 3

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.