Font Resizing using JavaScript

Font Resizing is a very common feature in many modern websites. This can be done very easily with jQuery. The following script uses cookies to save the user preference, so the user preference is saved. jQuery Cookie plugin is used for managing cookie using jQuery. So include that too.

the html for increase, decrease links

Basic HTML

Text Resizing with jQuery Demo.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Setup some variables

$(function(){
  $('input').click(function(){
   var ourText = $('p');
   var currFontSize = ourText.css('fontSize');
   var finalNum = parseFloat(currFontSize, 10);
   var stringEnding = currFontSize.slice(-2);
   if(this.id == 'large') {
    finalNum *= 1.2;
   }
   else if (this.id == 'small'){
    finalNum /=1.2;
   }
   ourText.css('fontSize', finalNum + stringEnding);
  });
 });

Example :

Text Resizing with jQuery Demo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.