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.
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.