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.
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-680study guides and testking SY0-201 design tutorials. Become expert with ourtestking 642-901 web designing course.
0 التعليقات:
إرسال تعليق