ARTICLE
jQuery Change the Text Size (zoom in and out)
jQuery Change the Text Size (zoom in and out).
Try it out the text resize functionality using jQuery.
Add this code in the head section:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function()
{
var os = $('p').css('font-size');
var num = parseFloat(os, 10);
var px = os.slice(-2);
$('p').css('font-size',
num / 1.4 + px);
if (this.id
== 'larger') {
$('p').css('font-size',
num * 1.4 + px);
}
});
});
</script>
HTML:
<body>
<a href="#" id ="larger">Larger
[+]</a>
<br>
<a href="#" id="smaller">Smaller
[-]</a>
<p>
Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</body>
Thanks
Shinu