Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how – using jQuery (a great JavaScript library).

CSS Font Size

Firstly, we should consider the various methods of specifying a font size using CSS. 4 CSS attributes pertaining to font sizing come to mind:

1. pixels
2. points
3. em
4. percentage – ‘%

For the purpose of this article, treat ‘em’ and ‘%’ as the same (where 1em is equivalent to 100%). When we allow visitors to change the font size, only elements with a font size set in ‘em’ or as a percentage will be variable. Elements without this attribute fall back to the value of their immediate parent element’s font-size. This means is that if you specify the value for an element’s font size in pixels, the font size will not change.

CSS

html {
 font-size:1em;
 font-family:Arial, Helvetica, sans-serif;
 color:#999999;
}
body {
 background-color:#111111;
}
.pixels {
 font-size:16px;
 line-height:30px;
 margin-bottom:20px;
 padding:20px;
 background-color:#222222;
}
.point {
 font-size:12pt;
 line-height:30px;
 margin-bottom:20px;
 padding:20px;
 background-color:#222222;
}
.em {
 font-size:1em;
 margin-bottom:20px;
 padding:20px;
 background-color:#222222;
}
.percentage {
 font-size:100%;
 margin-bottom:20px;
 padding:20px;
 background-color:#222222;
}
.undefined {
 margin-bottom:20px;
 padding:20px;
 background-color:#222222;
}
.FontSize {
 display: none; /* hide from non-Javascript browsers */ position:absolute;
 top:10px;
 right:10px;
 background-color:#333333;
 padding:5px;
}
.FontSizeInc, .FontSizeDec, .FontSizeReset{
 color:#CCCCCC;
 font-size:14px;
 float:left;
 margin:10px;
}

The JavaScript

 
var sitefunctions = {
 textresize : function(){
  // show text resizing links
  $(".FontSize").show();
  var $cookie_name = "sitename-FontSize";
  var originalFontSize = $("html").css("font-size");
  // if exists load saved value, otherwise store it
  if($.cookie($cookie_name)) {
   var $getSize = $.cookie($cookie_name);
   $("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error
  } else {
   $.cookie($cookie_name, originalFontSize);
  }
  // reset link
  $(".FontSizeReset").bind("click", function() {
   $("html").css("font-size", originalFontSize);
   $.cookie($cookie_name, originalFontSize);
  });
  // text "+" link
  $(".FontSizeInc").bind("click", function() {
   var currentFontSize = $("html").css("font-size");
   var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*1.2;
   if (newFontSize  11) {
    $("html").css("font-size", newFontSize);
    $.cookie($cookie_name, newFontSize);
   }
   return false; 
  });
 }
}
 
$(document).ready(function(){
  sitefunctions.textresize(); 
})

Html

<a href="#" rel="nofollow">Increase</a>
<a href="#" rel="nofollow">Decrease</a>
<a href="#" rel="nofollow">Reset</a>