Using jQuery’s .css and zoom to Scale the Entire Page

Although it might not be necessary to use jQuery, let’s try scaling the entire page using jQuery’s .css and zoom.

CSS for the Zoom Button

*This is the CSS for the button that triggers zoom. Modify as needed.*

<style type="text/css">
<!--
.cWrap{
	width:800px;
	height:800px;
	margin:0 auto;
	border:solid 3px #333;
}
.clBtn{
	width:120px;
	height:35px;
	background-color:#333;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
.clBtn:hover{
	width:120px;
	height:35px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
-->
</style>

JavaScript to Scale the Page from 25% to 200%

*Clicking each button will zoom the page at 25%, 50%, 100%, 150%, and 200% using jQuery’s css.*

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
	$('#ick25').click(function() {
		$("body").css("zoom","25%");
	});
	$('#ick50').click(function() {
		$("body").css("zoom","50%");
	});
	$('#ick100').click(function() {
		$("body").css("zoom","100%");
	});
	$('#ick150').click(function() {
		$("body").css("zoom","150%");
	});
	$('#ick200').click(function() {
		$("body").css("zoom","200%");
	});
});
// -->
</script>

HTML for the Zoom Buttons

*Buttons for 25%, 50%, 100%, 150%, and 200% are provided. Modify as needed.*

<div class="cWrap">


<h1>Scale the entire page by the following magnitudes:</h1>



<div id="ick25" class="clBtn">0.25x</div>


<div id="ick50" class="clBtn">0.5x</div>


<div id="ick100" class="clBtn">1x</div>


<div id="ick150" class="clBtn">1.5x</div>


<div id="ick200" class="clBtn">2x</div>


</div>
<!--/cWrap-->

Page Demo Using jQuery’s .css and Zoom

Page demo using jQuery’s .css and zoom
This technique could be useful when you want to fit the page to the browser. I’ll try using this on a responsive site next time.

　
Note that the CSS zoom may not work in some browsers (like Firefox).

　
Please use responsibly when repurposing this content.
Do not repurpose the Google Analytics tag inside the demo page.