jQuery: How to Add a Resize Text / Font Size Widget to Your Website

A jQuery "Increase / Decrease Font Size' widget lets you change the post font size on your blog, without the need of reloading the page. You can see it in action right here on Web Upd8, in the right side column.

Setting up the code:

1. jQuery code

If your website already uses jQuery, you can skip this step. If not, put this right above your </head> tag in your website's layout:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

2. The Widget

Put the below code in a widget on your blog. (If you use Blogger, add a new HTML widget and paste the code in it):

<style>
html {
 font-size:13px;
       font-family : Verdana, Arial, Helvetica, sans-serif;
 color:#000000;
}

.post-body {
 font-size:13px;
       font-family : Verdana, Arial, Helvetica, sans-serif;
       color:#000000;
}

</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
 // Reset Font Size
 var originalFontSize = $('.post-body').css('font-size');
 $(".resetFont").click(function(){
 $('.post-body').css('font-size', originalFontSize);
 });
 // Increase Font Size
 $(".increaseFont").click(function(){
  var currentFontSize = $('.post-body').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*1.2;
 $('.post-body').css('font-size', newFontSize);
 return false;
 });
 // Decrease Font Size
 $(".decreaseFont").click(function(){
  var currentFontSize = $('.post-body').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*0.8;
 $('.post-body').css('font-size', newFontSize);
 return false;
 });
});
</script>
<div id="sidebar-right2"><div id="sidebar1"><ul>
<li><a href="#" class="increaseFont">Increase</a></li>
<li><a href="#" class="decreaseFont">Decrease</a></li>
<li><a href="#" class="resetFont">Reset</a></li>
</ul>
</div></div>

3. Understanding the code and customizing it to fit your blog / website

The .post-body is the div class that the blog posts are written so make sure you search for the div class that your blog posts are displayed and replace the .post-body in the above code with the id or class of your div.

Also in the code above, this are the default values of the font for when you press "reset font size":

.post-body {
 font-size:13px;
       font-family : Verdana, Arial, Helvetica, sans-serif;
       color:#000000;
}

So change those with the values appropriate for your blog.