Skip to content

Instantly share code, notes, and snippets.

@vyatri
Created February 20, 2011 04:13
Show Gist options
  • Save vyatri/835687 to your computer and use it in GitHub Desktop.
Save vyatri/835687 to your computer and use it in GitHub Desktop.
javascript zoom in zoom out button with jQuery and CSS3
<a href="javascript:void(0)" onclick="enlargex()" id="zoomtab">+ Enlarge</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function enlargex(){
if ($('body').css('transform') == 'scale(1.2)') {
$('body').css('transform','scale(1)');
$('body').css('-webkit-transform','scale(1)');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(1)');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(1)');
$('body').css('-o-transform-origin','0 0');
$('body').css('-ms-transform','scale(1)');
$('body').css('-ms-transform-origin','0 0');
$('#zoomtab').html('+ Enlarge');
} else {
$('body').css('transform','scale(1.2)');
$('body').css('-webkit-transform','scale(1.2)');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(1.2)');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(1.2)');
$('body').css('-o-transform-origin','0 0');
$('body').css('-ms-transform','scale(1.2)');
$('body').css('-ms-transform-origin','0 0');
$('#zoomtab').html('- Shrink');
}
}
</script>
@pr-anoop
Copy link

Its not working with IE8. Any about that???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment