Zooming with jQuery and CSS.
Wall Script
Follow Me:
Thursday, October 08, 2009

Zooming with 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 use it for zooming website content. Take a look at live demo

Related Post : Changing design colors with jquery

Zooming with jQuery and CSS

Download Script     Live Demo

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/
<script type="text/javascript">


var size = $(this).val();
$("#main").css('font-size', size+'px');

return false;

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>

<div id="main">
Website Content
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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


  1. thanks for this, but its not really zoom its just making the text biger.

  2. Hi Sreenu,,This is prasad one of ur frnd ,,May be u forgot me,,,

    Any how this is suparb man,,,I wish you all the best for ur bright future

  3. 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.

  4. High Resolution jQuery Image Viewer - http://www.ajax-zoom.com

  5. We have similar functionality in our ajax document viewer - check it out! http://ajaxdocumentviewers.com

    Great post!

  6. 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

  7. thanks for this, but its not really zoom its just making the text biger.


Make in India