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;
<div id="fontSlider" style="width: 60%; display: inline-block;"></div>
<div id="adjustableText">
 Some test text in here
</div>
<script type="text/javascript">
 $(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 + '%');
   }
  });
 });
</script>

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. You can see this in action here.

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

Advertisements

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on August 30, 2011, in jQuery, jQuery UI and tagged , . Bookmark the permalink. Leave a comment.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: