Quick and Easy jQuery Font Resizer Tutorial

An article by qeqnes    3 Comments

This tutorial focuses more on the javascript, so the HTML and CSS are really basic.

1. HTML

Alright, we just have to make sure the class name is correct, and then you can style it up with images and hover effect.

<a href="#">A+</a> |
<a href="#">Reset</a> |
<a href="#">A-</a>

2. CSS

Shortest CSS ever! I set the default font size to 14px. It doesn’t matter if you specified the font size in percentage.

body {
	font-size:14px;
	font-family:arial;
}

a {
	color:#c00;
	text-decoration:none;
}

a:hover {
	color:#f00;
	text-decoration:underline;
}

3. Javascript

Lastly, the magical jQuery! Don’t freak out because of the length, 50% of the code is comments and it’s very simple.

$(document).ready(function () {

	//min font size
	var min=9; 	

	//max font size
	var max=16;	

	//grab the default font size
	var reset = $('p').css('fontSize'); 

	//font resize these elements
	var elm = $('p.intro, p.ending');  

	//set the default font size and remove px from the value
	var size = str_replace(reset, 'px', ''); 

	//Increase font size
	$('a.fontSizePlus').click(function() {

		//if the font size is lower or equal than the max value
		if (size<=max) {

			//increase the size
			size++;

			//set the font size
			elm.css({'fontSize' : size});
		}

		//cancel a click event
		return false;	

	});

	$('a.fontSizeMinus').click(function() {

		//if the font size is greater or equal than min value
		if (size>=min) {

			//decrease the size
			size--;

			//set the font size
			elm.css({'fontSize' : size});
		}

		//cancel a click event
		return false;	

	});

	//Reset the font size
	$('a.fontReset').click(function () {

		//set the default font size
		 elm.css({'fontSize' : reset});
	});

});

//A string replace function
function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}