Wall Script
Follow Me:
Thursday, October 8, 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.
Anonymous said...

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

Prasad Panigrahi said...

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

Anonymous said...

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.

Anonymous said...

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

Snowbound said...

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

Great post!

Anonymous said...

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

Hassam Zaeem said...

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

Post a Comment