Enabling Zoom using jQuery and CSS.

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 to 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="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.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="25">25 </option>
<option value="50">50 </option>
<option value="75">75 </option>
<option value="100">100 </option>
<option value="150">150 </option>
<option value="200">200 </option>
</select>

<div id="main">
Website Content
</div>