jQuery text resizer February 25th, 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.

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

Comments so far

Paul
July 2009

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

Knife Geek
July 2009

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

Knife Geek
July 2009

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.

benny
July 2009

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.

Christopher Hill
July 2009

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:

// Make the font resizer visible
$(".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:

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

Elisha
July 2009

Really useful. Thanks.