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>