Changing the browser zoom level

Question

I have need to create 2 buttons on my site that would change the browser zoom level      -   I m requesting browser zoom and not css zoom because of image size and layout issues   Well  is this even possible  I ve heard conflicting reports

User · Accepted Answer

I would say not possible in most browsers, at least not without some additional plugins. And in any case I would try to avoid relying on the browser's zoom as the implementations vary (some browsers only zoom the fonts, others zoom the images, too etc). Unless you don't care much about user experience.

If you need a more reliable zoom, then consider zooming the page fonts and images with JavaScript and CSS, or possibly on the server side. The image and layout scaling issues could be addressed this way. Of course, this requires a bit more work.

User · Answer

Possible in IE and chrome although it does not work in firefox    lt script gt     function toggleZoomScreen            document body style zoom    80           lt  script gt    lt img src  example jpg  alt  example  onclick  toggleZoomScreen    gt

User · Answer

as the the accepted answer mentioned  you can enlarge the fontSize css attribute of the element in DOM one by one  the following code for your reference     lt script gt      var factor   1 2      var all   document getElementsByTagName           for  var i 0  max all length  i  lt  max  i              var style   window getComputedStyle all i            var fontSize   style getPropertyValue  font-size             if fontSize               all i  style fontSize  parseFloat fontSize  factor   px                     if all i  nodeName      IMG                var width style getPropertyValue  width                var height style getPropertyValue  height                all i  style height    parseFloat height  factor   px               all i  style width    parseFloat width  factor   px                    lt  script gt

User · Answer

x000D   x000D   lt html gt  x000D     lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D           lt script gt  x000D          var currFFZoom   1  x000D          var currIEZoom   100  x000D   x000D          function plus    x000D                alert  sad    x000D                  var step   0 02  x000D                  currFFZoom    step  x000D                     body   css  MozTransform   scale     currFFZoom         x000D                  var stepie   2  x000D                  currIEZoom    stepie  x000D                     body   css  zoom         currIEZoom         x000D   x000D             x000D          function minus    x000D                alert  sad    x000D                  var step   0 02  x000D                  currFFZoom -  step  x000D                     body   css  MozTransform   scale     currFFZoom         x000D                  var stepie   2  x000D                  currIEZoom -  stepie  x000D                     body   css  zoom         currIEZoom         x000D             x000D       lt  script gt  x000D       lt  head gt  x000D   lt body gt  x000D   lt  --zoom controls-- gt  x000D                           lt a id  minusBtn  onclick  minus    gt ------ lt  a gt  x000D                           lt a id  plusBtn  onclick  plus    gt        lt  a gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    in Firefox will not change the zoom only change scale

User · Answer

Try if this works for you   This works on FF  IE8  and chrome   The else part applies for non-firefox browsers   Though this gives you a zoom effect  it does not actually modify the zoom value at browser level       var currFFZoom   1      var currIEZoom   100           plusBtn   on  click  function            if    browser mozilla               var step   0 02              currFFZoom    step                  body   css  MozTransform   scale     currFFZoom                   else               var step   2              currIEZoom    step                 body   css  zoom         currIEZoom                                    minusBtn   on  click  function            if    browser mozilla               var step   0 02              currFFZoom -  step                                  body   css  MozTransform   scale     currFFZoom                    else               var step   2              currIEZoom -  step                 body   css  zoom         currIEZoom

User · Answer

You can use the CSS3 zoom function  but I have not tested it yet with jQuery  Will try now and let you know  UPDATE  tested it  works but it s fun

User · Answer

Not possible in IE  as the UI Zoom button in the status bar is not scriptable   YMMV for other browsers

User · Answer

I could t find a way to change the actual browser zoom level  but you can get pretty close with CSS transform  scale    Here is my solution based on JavaScript and jQuery    lt  -- Trigger -- gt   lt ul id  zoom triggers  gt       lt li gt  lt a id  zoom in  gt zoom in lt  a gt  lt  li gt       lt li gt  lt a id  zoom out  gt zoom out lt  a gt  lt  li gt       lt li gt  lt a id  zoom reset  gt reset zoom lt  a gt  lt  li gt   lt  ul gt    lt script gt      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 gt  120  amp  amp  step gt 0    zoom level lt  80  amp  amp  step lt 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 gt 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 gt  120    zoom level lt  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                       lt  script gt

[javascript] Changing the browser zoom level

Examples related to javascript

Examples related to browser

Examples related to zooming