Text Resizer Using A Simple JavaScript

You may have found the text resizer on a webpage, a small button with very useful for visitors to decrease or increase the font size. Because the visitor has a different needs on how to read the article with a small or large font size. This button has a dynamic function to make it happen using a simple JavaScript and probably this will make the viewers may just appreciate and feel comfort.

VIEW Example

In this post I will try to show you how to create a text resize button with a small size of JavaScript. The script code will give the ability to set / adjust the text size on a webpage as the visitors want. You can customize the minimum / maximum size and the increasing / decreasing level whether the unit in em or pixel. It will adjust the size of a particular target section on a webpage, such as just the main post area, sidebar, multiple section if you want, even for the entire page in general.

How To Create Text Resizer

This function integrated with a button or may be just a text i.e. A A A, to control for changing the size transform, gives viewers a fine degree. You can place the button anywhere as you like, but preferable close with the text. Just takes a few minutes to add this with the following steps:

1. Add the following code above ]]></b:skin> or </style> in CSS style section.

CSS button

button { 
    padding: 3px 15px; 
    float: right; 
    cursor:pointer; 
    margin:0 5px;
    }

2. Add the following JqueryScript code above the </head>

JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note: If you already add any similar JQuery above with another version, then skip the step.

3. Still in head section, add the following JavaScript code above the </head>

Javascript

<script type="text/javascript">
  $('').ready(function() { 
  $('#incfont').click(function(){    
        curSize= parseInt($('.post-demo').css('font-size')) + 2;
  if(curSize<=22)
        $('.post-demo').css('font-size', curSize);
        });  
  $('#decfont').click(function(){    
        curSize= parseInt($('.post-demo').css('font-size')) - 2;
  if(curSize>=12)
        $('.post-demo').css('font-size', curSize);
        }); 
 });
</script>

Blue color is an example of a section that you want to change the text size, you should change this because every webpage has a different name and structure. You can customize the level size, minimum and maximum as you like, here in pixel, but also works fine even with unit em as default size.

4. Add following code to put the button somewhere in example after <div class="main-wrapper"> or <div class="sidebar-wrapper">.

HTML

<button id="incfont"><b>A+</b></button>
<button id="decfont"><b>A-</b></button>

5. Save Template, and see the results.

modifine