jQuery text resizer

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.

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