Increase and Decrease font size using jQuery
This tutorial explains how to increase and decrease font size of text content in a div dynamically using jquery. DEMO DOWNLOAD Op...
https://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html
This tutorial explains how to increase and decrease font size of text content in a div dynamically using jquery.
Open notepad, add below code and save it as an html file.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
#content{
font-family: 'Lato', sans-serif;
text-align:justify;
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#incfont').click(function(){
curSize= parseInt($('#content').css('font-size')) + 2;
if(curSize<=20)
$('#content').css('font-size', curSize);
});
$('#decfont').click(function(){
curSize= parseInt($('#content').css('font-size')) - 2;
if(curSize>=12)
$('#content').css('font-size', curSize);
});
});
</script>
</head>
<body>
<div style="background-color:gray;width:700px;height:400px;">
<div id="content" style="height:260px">
ProgrammingFree is a technical blog with quality articles on various programming languages with appropriate source code,screenshots and live demos.This blog contains information on several programming topics with appropriate screenshots and code. I never write a blog here on any topic, without actually implementing it myself to make sure that I am not misleading the readers of my blog. I am a beginner in writing though not in programming, so I really value your suggestions on my writing skills. Please remember this - the best place to get help for the issues you have in your own implementation is at technical forums and not on blogs. I welcome comments about technical inaccuracies you may spot, or typos - or indeed improvements you might want to offer to the code I have presented, or any other aspect of this site.
</div>
<a href="#" id="incfont">A+</a>
<a href="#" id="decfont">A-</a>
</div>
</div>
</body>
</html>
Initially when the page loads, the font size is set to 14px. Then as the user clicks on increase or decrease links font size is increased or decreased by 2 units dynamically by using .css() method. Note that we have set an higher limit of 20px and lower limit of 14px for the text content. Check out the demo to see how it works.
If you think this article and other information on this website is useful to you, please keep yourself subscribed via email or other social networking sites to be notified whenever more useful articles are posted here. Thanks for reading!
this is great, thank you
ReplyDeleteThanks!
ReplyDeletethank you
ReplyDeletehow to put a default but example simple A
ReplyDeletePerfect
ReplyDelete