Resize the font using Query | 2my4edge

31 August 2013

Resize the font using Query

Resize the font size using JQuery is very simple one, Onclick how to make font size increase and decrease using Jquery. here we are going to see thing about designing. just make simple thing, it is also like magnifying the text onclick. usually we are using shortcut key CTRL + + or CTRL + - to zoom in and zoom out the browser window size. but here are going increase and decrease only the font size of the web page. let see the details about that.

DOWNLOAD         LIVE DEMO
for this function, just need simple script and make call to parseFloat in Query that will make the operation. here we go, just see the coding of this. 

CODE : 
<div class="container"> 
<div>
-----
any of the content --- as you need ----
-----
</div>
<div id="changesize">
<a href="#" class="increase"><img src="increase.png" /></a>
<a href="#" class="decrease"><img src="decrease.png" /></a>
<a href="#" class="reset"><img src="reset.png" /></a>
</div>
</div>
the above is the sample code, but you can give any of your content in the container div tag. and the script could be come in the same page. 

SCRIPT :
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // Reset font-size
  var defaultsize = $('html').css('font-size');
  $(".reset").click(function(){
  $('html').css('font-size', defaultsize);
  return false;
  });
  // Increase font-size
  $(".increase").click(function(){
    var currentfontsize = $('html').css('font-size');
    var incfontsize = parseFloat(currentfontsize, 10);
    var newsize = incfontsize*1.5;
    $('html').css('font-size', newsize);
    return false;
  });
  // Decrease font-size
  $(".decrease").click(function(){
    var currentfontsize = $('html').css('font-size');
    var decfontsize = parseFloat(currentfontsize, 10);
    var newsize = decfontsize*0.8;
    $('html').css('font-size', newsize);
    return false;
  });
});
</script>
i hope you can get clear idea from the above script. the script makes increase and decrease operation using Jquery, here the parseFloat make the call to JQuery that will perform the operation. which means that, font-size, increasing and decreasing.
thank you.


RELATED POSTS :










3 comments:

^