<h3>Resizing Text Dynamically</h3> Following example, you can resize the text to increase, decrease, or reset the text size of a webpage using jQuery.
<h3>Example</h3>
<html> <head> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
</head>
<body>
<input type=button class="increaseFont" style="cursor: pointer; color: black ; background-color: #ffb200 ; border: 1px outset #b37d00 ;" align=center value='+'>
<input type=button class="decreaseFont" style="cursor: pointer; color: black ; background-color: #ffb200 ; border: 1px outset #b37d00 ;" align=center value='-'>
<input type=button class="resetFont" style="cursor: pointer; color: black ; background-color: #ffb200 ; border: 1px outset #b37d00 ;" align=center value='='> <br>
<span><h4>Font size can be changed in this section</h4></span>
<div class="section1">This sentence can't be affected</div>
<div class="section2">This sentence can be changed or affected!</div>
</body>
</html>
