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>