9lessons programming blog
Loading Search
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/
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>
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.
Sponsored Links

Share this post

Comments
{ 6 comments }
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

Post a Comment

Subscribe now!Recent Posts

Categories

Subscribe now!Popular Posts

People Says

@9lessons thank you for the great tutorials, we truly appreciate your contributions to the design community.

Smashing Magazine

Like Me

follow me
products

9lessons labs

9lessons clouds

Android application

Chrome Extension