jQuery text resizer

by Christopher Hill on 25th February, 2008

I was on a site today which offered text resizing. Great I thought, let me increase the font a wee bit—it was a bit small. It proceeded to reload the page completely to set the cookie using some server-side language. The site in question was running quite slow, so it took me upwards of 5 seconds to see the changes. It would have been quicker for me to tap cmd+plus a couple times.

This reminded me that current implementation of text-resizing are inadequite. When you click to increase/decrease, the font sizes change instantly. Pop! I think a better version would be to gradually increase the font size, so the user can view it happening right in front of them. This also looks a little cooler.

I haven’t seen this done before, which of course doesn’t mean it hasn’t, so I decided to make it. A couple lines of jQuery later it was completed. You can view the demonstration of it at my lab.

You can view the source and grab the source code, but what you can’t get is the 1 line of PHP. So here it is, below, in all its glory, yes, it is put inside the CSS code. You can parse your CSS files as PHP if you want using .htaccess. I hope this helps someone, and hope to see more of the same implemented throughout the Web.

  1. body{font-size:<?php echo isset($_COOKIE['font_size']) ? $_COOKIE['font_size'] : '1'; ?>em}

Related articles

Top | Post a comment | Permalink

User submitted comments

1 Paul wrote

25th February, 2008


A interesting way of doing it. Like you side a process with several sizes would be better.

2 knife geek wrote

27th February, 2008


Whoa that’s pretty slick. I’m going to have to bookmark this for possible future use. Thanks man!

3 Jimmy wrote

22nd March, 2008


Yeah…! This is definitely going to be really useful. Seen a lot of these out there but haven’t found one which implement/use cookies. Thank you very much for sharing it.

4 benny wrote

30th May, 2008


so cool. how would you make the links not show up if javascript is disabled?

or add another class to the link that the user has clicked, so i could style it differently?

you rock.

5 benny wrote

30th May, 2008


so cool. how would you make the links not show up if javascript is disabled?

or add another class to the link that the user has clicked, so i could style it differently?

you rock.

6 Christopher Hill wrote

15th June, 2008


benny, to make the links not show up if Javascript is disabled then set them to display:none or visibility:hidden through the CSS straight away. In the document ready jQuery, simply then change their visibility through something like:

  1. // Make the font resizer visible
  2. $(".fontSizeResizer a").css("display", "block");

To style the clicked link, you would need two commands—one to remove the styling from the previously clicked link, and then one to add the class. In the click() function, you could use something like:

  1. // Remove the clas "selected" from the font sizer
  2. $(".fontSizeResizer a").removeClass("selected");
  3. // Add the class "selected" to the clicked link
  4. $(this).addClass("selected");

7 Elisha wrote

19th June, 2008


Really useful. Thanks.

Penny for your thoughts

Comment posting guide

Your real name will be displayed as the author of the post. Real names are preferred, both first and second names, but nicknames/alter-egos are permitted. Any comments with the author name whose primary aim is to promote their website, and/or company will be removed.

If you supply a website URI then your real name will be clickable to that site. Only one sub-directory is permitted; e.g. http://www.example.org/directory.

Accepted comment input

  • <strong>…</strong>
  • <em>…</em>
  • <blockquote>…</blockquote>
  • <tt>…</tt>
  • <a href="…">…</a>
  • <code>…</code>




Recent articles

Other topics I ramble on about