we will be learning something about accessiblity. Well, some people may think that it's not important browsers has the zoom in and zoom out functionality anyway, oh well, that's quite true but design wise, when you use the zoom feature on browsers, it's more likely to ruin your design as well. So, we have this javascript font resizer that allow you to resize some section of your text instead of everything.

This tutorial focuses more on the javascript, so the HTML and CSS are really basic.

1. HTML

Alright, we just have to make sure the class name is correct, and then you can style it up with images and hover effect.

<a href="#" class="fontSizePlus">A+</a> 
<a href="#" class="fontReset">Reset</a> 
<a href="#" class="fontSizeMinus">A-</a>

2. CSS

Shortest CSS ever! I set the default font size to 14px. It doesn't matter if you specified the font size in percentage.

body {
    font-size:14px;
    font-family:arial;
}
 
a {
    color:#c00;
    text-decoration:none;
}
 
a:hover {
    color:#f00;
    text-decoration:underline;
}

3. Javascript

Lastly, the magical jQuery! Don't freak out because of the length, 50% of the code is comments and it's very simple.

$(document).ready(function () {
 
    //min font size
    var min=9; 
 
    //max font size
    var max=16;
     
    //grab the default font size
    var reset = $('p').css('fontSize');
     
    //font resize these elements
    var elm = $('p.intro, p.ending'); 
     
    //set the default font size and remove px from the value
    var size = str_replace(reset, 'px', '');
     
    //Increase font size
    $('a.fontSizePlus').click(function() {
         
        //if the font size is lower or equal than the max value
        if (size<=max) {
             
            //increase the size
            size++;
             
            //set the font size
            elm.css({'fontSize' : size});
        }
         
        //cancel a click event
        return false;  
         
    });
 
    $('a.fontSizeMinus').click(function() {
 
        //if the font size is greater or equal than min value
        if (size>=min) {
             
            //decrease the size
            size--;
             
            //set the font size
            elm.css({'fontSize' : size});
        }
         
        //cancel a click event
        return false;  
         
    });
     
    //Reset the font size
    $('a.fontReset').click(function () {
         
        //set the default font size
         elm.css({'fontSize' : reset});    
    });
         
});
 
//A string replace function
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}

Easy isn't it? You can style up the "increase font size" and "decrease font size" with icons to make it more presentable. jQuery has definitely change the way we code javascript, back to the old day, this piece of code wouldn't able to achieve such a easy and short code.