Quick and Easy jQuery Font Resizer Tutorial

Quick and Easy jQuery Font Resizer Tutorial


Quick and Easy jQuery Font Resizer Tutorial

Introduction

Today, we will be learning something about accessiblity. Well, some people may think that it's not important browsers has the zoom in and zoom out functionality anyway, oh well, that's quite true but design wise, when you use the zoom feature on browsers, it's more likely to ruin your design as well. So, we have this javascript font resizer that allow you to resize some section of your text instead of everything.

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="#" class="fontSizePlus">A+</a> | 
<a href="#" class="fontReset">Reset</a> | 
<a href="#" class="fontSizeMinus">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=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);
}

Conclusion

Easy isn't it? You can style up the "increase font size" and "decrease font size" with icons to make it more presentable. jQuery has definitely change the way we code javascript, back to the old day, this piece of code wouldn't able to achieve such a easy and short code.

BestHostingSearch.com, a top web hosting review site, has added this feature to all of their articles by following this tutorial, which allows readers to adjust the font size handy and makes the reading easily.

Like this tutorials? Share it with you friends! Visit us more often for more tutorials. Thanks.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

14 comments

Eric Teapot
Wed, 30th June 2010
Surely the browser zoom is more design-friendly? It scales everything in proportion By just scaling text you end up changing the layout, affecting line width (making body text less comfortable to read) and if people are scaling for accessibility reasons then there's a good chance they want the other content larger as well.

Also, this doesn't allow the use of the mouse wheel for faster zoom; it sets a maximum size which would still be too small for comfort on one of my own displays; it isn't persisted to other pages on the same site; it obviously won't work without Javascript; it requires the designer to add clutter to the page UI; and it contributes to the misguided culture of training users to expect in-page resizers instead of using browser features (would you rewrite a "back" button as a Javascripted element in your page?).

I just don't get why you'd spend time implementing a half-baked solution like this instead of the far, far better one that comes for free.
Reply
Federica Sibella
Wed, 30th June 2010
Hi, clean and easy to implement. Check out also our jQuery plugin that auto-resizes in relation to screen size; demo and download here: http://centratissimo.musings.it cheers! Reply
webanddesigners
Wed, 30th June 2010
Nice and easy tutorial Reply
Syamsul
Wed, 4th August 2010
I could'nt agree more. By far, browser zoom is easier. Still, i think text resizer is still relevant in certain cases (in web competition, this function is a must in my country... :P). Reply
Web Design
Wed, 11th August 2010
Conclusion: yes, easy indeed when you watch a well-written tutorial. :)

Cheers Reply
Ayaz Malik
Tue, 8th February 2011
hmm bro there seems to be a little bug, if u hit reset then hit A+ one first click it makes the text smaller then starts enlarging it. same goes backwards for A- after reset. im using firefox. Reply
devo
Wed, 23rd February 2011
thx for upload and tutu

best wishes Reply
Paul
Fri, 25th March 2011
Ayaz Malik is right. This bug is because the value of javascript variable "size" is not reset upon clicking reset. So the last event binding function contain an additional line:

size = reset;
(Add it behind "elm.css({'fontSize' : reset});".)

Cheers,
Paul Reply
Paul
Fri, 25th March 2011
Sorry, my last comment contained the wrong line. The new line should read:

size = str_replace(reset, 'px', '');

Cheers,
Paul Reply
Domino
Tue, 16th August 2011
var size = reset.replace( 'px', ''); // jquery replace : ) Reply
Erin
Fri, 4th November 2011
Thanks so much, and thanks paul! Reply
drupal convert
Tue, 3rd April 2012
I wrote another jquery font resizer, as a plug in. Not trying to rob your thunder, yours looks pretty good too. I should include it in case anyone's interested (it has a few more options but is basically the same)...

http://simpleritsolutions.com/font-resizer
Reply
Yasen
Thu, 5th July 2012
I've extended it to grab a list of elements and increase/decrease their size, while the code above modifies only P tags:

//min font size
var min=9;
//max font size
var max=25;
//font resize these elements
var elements = ['p', 'h1', 'h2', 'div'];

//Increase font size
$('a.fontSizePlus').click(function() {
//if the font size is lower or equal than the max value
$(elements).each(function(key, val) {
var size = str_replace($(val).css('fontSize'), 'px', '');
if (size<=max) {
//increase the size
size++;
//set the font size
$(val).css({'fontSize' : size});
}
});
//cancel a click event
return false;
});

$('a.fontSizeMinus').click(function() {
$(elements).each(function(key, val) {
var size = str_replace($(val).css('fontSize'), 'px', '');
if (size>=min) {
//decrease the size
size--;
//set the font size
$(val).css({'fontSize' : size});
}
});
//cancel a click event
return false;
}); Reply
Skip
Fri, 9th May 2014
I tried @Yasen wat and the reset does not work, do you have a way to make reset work please? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement