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.
This question is related to
javascript
browser
zooming
<html>_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<script>_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_
</script>_x000D_
</head>_x000D_
<body>_x000D_
<!--zoom controls-->_x000D_
<a id="minusBtn" onclick="minus()">------</a>_x000D_
<a id="plusBtn" onclick="plus()">++++++</a>_x000D_
</body>_x000D_
</html>in Firefox will not change the zoom only change scale!!!
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:
<!-- 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>
Not possible in IE, as the UI Zoom button in the status bar is not scriptable. YMMV for other browsers.
Possible in IE and chrome although it does not work in firefox:
<script>
function toggleZoomScreen() {
document.body.style.zoom = "80%";
}
</script>
<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">
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.
<script>
var factor = 1.2;
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < 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";
}
}
</script>
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
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 + '%');
}
});
Source: Stackoverflow.com