Quick and easy text size adjustment with jQuery

Lately I have been working on a site that deals with quite a bit of text. When it comes to choosing the default text size for a web site, as a developer I try to pick a happy medium between what lays out well on the page but is still easily readable. It would be nice to give the user the ability to adjust the font size to their liking.

As it turns out, this is dead simple to accomplish and using the jQuery UI slider it even looks pretty good too. First we will create an empty div that will contain our slider element and a target div that will contain some test text. Next we add the jQuery code to adjust the font size as the slider is moved.

Font size:
<span id="fontSz">100%</span>&nbsp;&nbsp;
Some test text in here
$(document).ready(function(){ $('#fontSlider').slider({ range: "min", min: 50, max: 200, value: 100, slide: function(event, ui){ fontSize = ui.value; $('#adjustableText').css('font-size', ui.value + '%'); $('#fontSz').html(ui.value + '%'); } }); });

That pretty much covers the code. Basically we are allowing the user to scale the text in the adjustableText div from 50% up to 200% and the font will adjust as the slider is moved.

It has been a while since I have posted anything on jQuery so this was a fun little project.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s