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>
0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

20 − three =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like
Read More

HTML & CSS: A Beginner’s Guide

HTML & CSS: A Beginner's Guide teaches you with the aid of colourful screenshots and diagrams how to create web sites and style them using Cascading Style Sheets. This book offers practical guidance, examples and know how without the long boring technical fluff and how to apply it to related Web development issues.