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. Take a look at live demo
Related Post : Changing design colors with jquery
Related Post : Changing design colors with jquery
Download Script 
Live DemoJavascript 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');
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:
Join testking to learn best web designing practices using expert testking 70-680 study guides and testking SY0-201 design tutorials. Become expert with our testking 642-901 web designing course.
<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>
thanks for this, but its not really zoom its just making the text biger.
ReplyDeleteHi Sreenu,,This is prasad one of ur frnd ,,May be u forgot me,,,
ReplyDeleteAny how this is suparb man,,,I wish you all the best for ur bright future
I must agree with the first comment, this is making the text bigger. I'd love to see this example with a slider that changes the text size.
ReplyDeleteHigh Resolution jQuery Image Viewer - http://www.ajax-zoom.com
ReplyDeleteWe have similar functionality in our ajax document viewer - check it out! http://ajaxdocumentviewers.com
ReplyDeleteGreat post!
Its a great script but it would really help beginners if you explained where it went on a page. I cannot work out what to do with it now I have downloaded it. Tried inserting it in a page but nothing functions
ReplyDeletethanks for this, but its not really zoom its just making the text biger.
ReplyDelete