Simple jQuery Text Resizer

I have done JavaScript text resizers a couple of different ways before, but I think I found my favorite way on a recent project. In previous projects, I have messed around with determining the current font size and adjusting it appropriately. But, in my opinion, simplifying things has made it a much better implementation.

If you want to skip right to the demo, feel free.

View Demo

Disclaimer

Let me first say that I have started to size text in pixels and soft serving EMs to IE6. There are tons of different font sizing techniques you can use, but this is what is working for me. So use whatever technique you please, and adjust as needed.

Another thing: I hate text resizers. In my opinion, there is no reason to duplicate browser functionality. I feel the same about back and print links, but sometimes the functionality is requested, so I have to build it.

Concept

The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.

Code

Let’s first start as we always should, by creating the markup:

<ul class="resizer">
 <li class="small"><a href="#">A</a></li>
 <li class="medium"><a href="#">A</a></li>
 <li class="large"><a href="#">A</a></li>
</ul> 

jQuery

The markup was simple enough, so let’s get started on the jQuery. First, we want to execute our code when the document is loaded, and then add an event when one of the resizer links are clicked:

$(document).ready(function() {
 $('.resizer a').click(function() {

 });
}); 

Next, we want to get the class of the parent of the link that has been clicked, remove any of the resizer classes from the body, and add the new one:

$(document).ready(function() {
 $('.resizer a').click(function() {
  var textSize = $(this).parent().attr('class');
  $('body').removeClass('small medium large').addClass(textSize);
 });
}); 

We also don’t want to regular action of the link to be followed, so we need to return false:

$(document).ready(function() {
 $('.resizer a').click(function() {
  var textSize = $(this).parent().attr('class');
  $('body').removeClass('small medium large').addClass(textSize);
  return false;
 });
}); 

I also think it is important to remember what text size a user has selected while browsing the site, so we will take advantage of the jQuery Cookie plugin to help us with that. We will set a cookie that denotes which size the user has selected:

$(document).ready(function() {
 $('.resizer a').click(function() {
  var textSize = $(this).parent().attr('class');
  $('body').removeClass('small medium large').addClass(textSize);
  $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
  return false;
 });
}); 

Finally, we just need to add a check to the beginning of the script, so that if that cookie is set, we add that size as a class to the body:

$(document).ready(function() {
 if($.cookie('TEXT_SIZE')) {
  $('body').addClass($.cookie('TEXT_SIZE')); 
 }
 $('.resizer a').click(function() {
  var textSize = $(this).parent().attr('class');
  $('body').removeClass('small medium large').addClass(textSize);
  $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
  return false;
 });
}); 

CSS

Now is where we get to the really powerful part of doing the text resizing like this: the CSS. We can start by simply stating our text size when it is in the small/default state:

body { font: 12px/18px Arial, sans-serif; } 

Then, we just need to make a simple adjustment for the medium and large sizes:

.medium { font-size: 16px; line-height: 22px; }
.large { font-size: 20px; line-height: 26px; } 

So you can just carry through this idea for the rest of the elements that have been assigned a font size:

h1 { font-size: 30px; line-height: 36px; }
.medium h1 { font-size: 34px; line-height: 40px; }
.large h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 24px; line-height: 30px; }
.medium h2 { font-size: 28px; line-height: 34px; }
.large h2 { font-size: 32px; line-height: 38px; }
h3 { font-size: 18px; line-height: 24px; }
.medium h3 { font-size: 22px; line-height: 28px; }
.large h3 { font-size: 26px; line-height: 32px; } 

View Demo

The idea is very simple, and it really separates the presentation and behavioral layers. So what do you think? Do you have another technique that you like?

Categories

Recent Articles

February 2012

S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

21 Comments

phphi

09.02.2009

very good!
cool!

Jaan

09.03.2009

Nice one…but if u provide the download option for ur application its good

Trevor

09.03.2009

@Jaan-
What are you trying to download? You can see the whole script above and on the example page.

Robert

09.17.2009

I agree with you about actually building a text resizer like this, pointless!

But, when needs must this is great, thanks!

Maicon Sobczak

11.16.2009

Very useful tut. Mainly about the $.cookie funcionality that I did not know.

Nauman Akhtar

04.01.2010

Excellent, good work.

Perry Winch

04.29.2010

Wicked, very useful tut.

ophelianot

05.25.2010

An elegant and simple solution. Thanks for sharing.

Neal St. Clair

06.25.2010

Wanted to say thanks for a great tutorial!  I implemented this recently using a select box to provide the text re-size options.  Couldn’t find any examples out there so I wanted to share my code here.

Here is the javascript


$(document).ready(function(){

if($.cookie(‘TEXT_SIZE’)) {
  $(’#textHolder’).addClass($.cookie(‘TEXT_SIZE’));
}
$(“select.fontSize”).change(function(){
  var textSize = $(this).val();
  $(’#textHolder’).removeClass(‘small-text med-text lg-text xlg-text’).addClass(textSize);
  $.cookie(‘TEXT_SIZE’,textSize, { path: ‘/’, expires: 10000 });
  return false;
});

});

Here is the HTML of the select box that triggers the text re-sizing:


 
    Change Text Size
    Small
    Medium
    Large
    Largest
 

Thanks again for a great tutorial.  Hope this helps someone else out there.  If you want to see this code in action, check out:

http://www.nationwidemedical.com/about/

Neal

Neal St. Clair

06.25.2010

I see that the comments stripped out my HTML code for the select box.  If you need a reference for the select form check out the link in the comment above and view source.  Very easy to implement.

Neal
——-

contentgrrl

08.16.2010

Good job, but I found one from Dynamic Drive that was slightly more elegant, in that it did not require you to add a bunch of redundant styles to your CSS. Instead, it defaults to resize the body font, and allows you to specify the target selectors you wish to resize.

http://dynamicdrive.com/dynamicindex9/fluidtextresizer.htm

Trevor

08.16.2010

@contentgrrl-
I’m not sure that I feel the DynamicDrive one is any more elegant, but to each her own.

Brett Widmann

11.01.2010

Great code. Thanks for sharing!

Maxizinsane

11.03.2010

The script doesn’t work for me on Firefox

Trevor

11.03.2010

@Maxizinsane-
The demo works for me in Firefox. What version are you using? Are you trying the demo or your own page?

Maxizinsane

11.06.2010

I tried the demo with Firefox/3.6.12

Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 ( .NET CLR 3.5.30729)

Javascript usually works on Firefox for me, the problem could be specific to me but I doubt it. There is no error appearing in the error console.

Tested the script on IE and it works like a charm.

maxizinsane

11.06.2010

I found the (my) problem, it was my favorite Firefox module (NoScript) blocking the most important script.  (I allowed all the Javascript I could but it didn’t let me for jquery since it is hosted from another server and detected it as cross-site Javascript.)

Sorry about that, the code works fine if you put all the script on the same server.

Here is the info:

[NoScript] Blocking cross-site Javascript served from
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js with wrong type info text/x-c, attachment; filename=“jquery-1.3.2.min.js” and included by
http://trevordavis.net/play/jquery-text-resizer/

Error : jQuery is not defined
Source file :
http://trevordavis.net/play/jquery-text-resizer/jquery-cookie.
js
Line : 1

Error : $ is not defined
Source file : http://trevordavis.net/play/jquery-text-resizer/
Line : 9

wnn

12.10.2010

superb! but its not working on my chrome, is it because of cookie setting or something?

Trevor

12.10.2010

@wnn-
The demo works fine for me in Chrome 8.0.552.215.

maha

03.29.2011

thank you

madalin

05.08.2011

Thank you for this, i’ve been looking for the cookie functionality too.

Too late, comments are closed!

Don’t worry, you can email me or contact me on Twitter.