"Enlarge" browser window / view using JavaScript?

Question

We can increase and decrease the scroll by pressing ctrl.

But I want to do this using jQuery or JavaScript. Is it possible to?

Answer 1

Since you also noted in jquery (although only js is written in the question title), I would add this answer

You can add the following web pages to a web page to enlarge the browser window.

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

So your jquery will become

 $(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 */ }); 

Do not worry about any cross-browser, as the browser will avoid any obscure css property.

Answer 2

Here is my solution using CSS transform: scale () and JavaScript / jQuery. This approaches zoom in / out of the browser:

 <!-- 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> 

Answer 3

In IE:

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

and you can set the browser scale

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

Answer 4

Checkout jsfiddle . Something you can use, but this is not an exact function, like zooming in on a browser.

 $('#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 + ')' }); }