Below are the javascript for increase and decrease browser zoom level. In below we have used three button and each button have id respectively "jfontsize-d", "jfontsize-m", "jfontsize-p".
Above JavaScript works with IE8+, Firfox and Google Chrome. It also works web-kit browser like safari.
<body style="zoom:100%;-moz-transform: scale(2);">
<a href="#" id="jfontsize-d">Reset Zoom</a>
<a href="#" id="jfontsize-m">Increase Zoom Level</a>
<a href="#" id="jfontsize-p">Decrease Zoom Level</a>
<script type="text/javascript">
var currFFZoom = 1;
var currIEZoom = 100;
$('#jfontsize-d').click(function() {
if ($.browser.mozilla) {
$('body').css('MozTransform', 'scale(' + 1 + ')');
} else {
$('body').css('zoom', ' ' + 100 + '%');
}
});
$('#jfontsize-p').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 + '%');
}
});
$('#jfontsize-m').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 + '%');
}
});
</script>
</body>
Above JavaScript works with IE8+, Firfox and Google Chrome. It also works web-kit browser like safari.
0 comments:
Post a Comment