In this post I want to explain about Text Zooming with jQuery and CSS. This is basic level tutorial just changing style using jQuery script. It’s simple use it for zooming website content.
Javascript Code
Contains javascript code. $(“#zoom”).change(funtion(){}- zoom is the id name of the select box. Using $(“#zoom”).val(); calling select box value. Applying style at $(“#main”).css
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#zoom").change(function() {
var size = $(this).val();
$("#main").css('font-size', size+'px');
return false; });
});
</script>HTML Code
Contains HTML code.
Zoom Text:
<select id="zoom">
<option value="20">20 px</option>
<option value="30">30 px</option>
<option value="40">40 px</option>
<option value="50">50 px</option>
<option value="60">60 px</option>
<option value="70">70 px</option>
<option value="80">80 px</option>
</select>
<div id="main">
Website Content
</div>
CSS
Contains CSS code.
<style type="text/css">
body { font-size:15px; }
* { margin:0px; }
#main { margin:10px; font-size:25px;}
#zoom { font-size:15px;}
iframe { display:none; }
</style>