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...



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!

Subscribe to GET LATEST ARTICLES!


Related

Jquery 2115828486956174364

Post a Comment

  1. how to put a default but example simple A

    ReplyDelete
  2. best rice cooker that might be there on your television because of which

    ReplyDelete
  3. Quickbooks software gives complete security to the users you can contact with us any time 24*7 our QuickBooks support phone number available.Quickbooks tech support

    ReplyDelete
  4. Greetings! I simply want to offer huge thumbs up for the great stuff you have got here on this post. It looks perfect and I agreed with the topics you just said. Thanks for the share. But if you guys want Best Graphic Design Agency in India than contact us.

    ReplyDelete
  5. Hey admin

    What a Great article keep it up with awesome stuff like this.

    You have clearly mentioned all the things and guyz if you want Love Marriage Vashikaran Specialist Baba ji Mumbai than visit our blog as well thnks.

    ReplyDelete
  6. Really impressed! Everything is very open and very clear clarification of issues. It contains truly facts. Your website is very valuable. Thanks for sharing 먹튀검증

    ReplyDelete
  7. Excellent post. I was checking constantly this website and I am impressed!
    Very helpful info particularly the last part �� I take care of such
    information much. I used to be seeking this particular info for
    a long time. Thanks a lot and better of luck.
    섯다

    ReplyDelete
  8. I tell everyone how amazing you are. You have the best laugh.
    Wonderful article! That is the kind of info that are supposed to be shared around the internet.
    I used to be able to find good info from your
    blog posts.
    스포츠토토

    ReplyDelete
  9. Excellent post, very informative. I wonder why
    other specialists of this sector don’t realize this.
    You must continue your writing. I am just confident, you possess a fantastic readers’ base already!
    한국야동

    ReplyDelete
  10. I have to show my respect for your generosity supporting folks that really want help on this particular situation. Your very own dedication to passing the solution all over ended up being certainly useful and have usually enabled most people just like me to reach their objectives. This warm and helpful hints and tips indicates much to me and still more to my fellow workers. Regards; from each one of us.
    토토사이트

    ReplyDelete
  11. blog always contains new and exciting information Someone To Write My Essay For Me and reading it feel like this blog really has all of these qualities that make it a blog.

    ReplyDelete

emo-but-icon

SUBSCRIBE


item