1 Reply Latest reply on Nov 25, 2013 4:59 AM by BenPleysier

    Inserting a button to zoom out a page.

    timpennells

      Hi,

       

      I have a piece of code to zoom the page in, so i changed a few bits to zoom the page out and it only works in firefox, here it is:

       

      <a href="#" ONCLICK="if(window.parent.document.body.style.zoom!=0)

       

      window.parent.document.body.style.MozTransform = 'scale(1.0)';

       

      else window.parent.document.body.style.zoom=1.0;"

      >

          <img src="http://www.wearemogul.com/more.png" alt="zoom in"/>

      </a>

       

      Obviously the if statement is returning true as it does the .MozTransform and misses the else bit, in the zoom in code all that is different is 'scale(1.5)' and zoom=1.5

       

      any ideas?

        • 1. Re: Inserting a button to zoom out a page.
          BenPleysier Adobe Community Professional & MVP

          Here is an example using jQuery

           

           window.onload = function() {
           var currFFZoom = 1;
           var currIEZoom = 100;
          
           $('#In').on('click',function(){
               if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
                   var step = 0.02;
                   currFFZoom += step; 
                   $('body').css('MozTransform','scale(' + currFFZoom + ')');
               } else {
                   var step = 2;
                   currIEZoom += step;
                   $('body').css('zoom', ' ' + currIEZoom + '%');
               }
           });
          
           $('#Out').on('click',function(){
               if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
                   var step = 0.02;
                   currFFZoom -= step;                 
                   $('body').css('MozTransform','scale(' + currFFZoom + ')');
          
               } else {
                   var step = 2;
                   currIEZoom -= step;
                   $('body').css('zoom', ' ' + currIEZoom + '%');
               }
           });};
          
          
           <input type="button" id="Out" alt="Zoom Out"/>
           <input type="button" id="In" alt="Zoom In"/>
          
          1 person found this helpful