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!
Your feedback helps us to improve 9lessons.info
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