Skip to content

Instantly share code, notes, and snippets.

@yozzi

yozzi/font-size.html

Created September 1, 2015 13:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yozzi/e6fe4a5f69c930a52ee6 to your computer and use it in GitHub Desktop.
Save yozzi/e6fe4a5f69c930a52ee6 to your computer and use it in GitHub Desktop.
Download ZIP
Increase and decrease font size with jQuery
Raw
font-size.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment