A really simple font resizer using JQuery

Sometimes it’s useful to have links or buttons to increase the font size on a website. Even though browsers have built-in functions to resize content, not all users are aware of this, or can easily remember how to increase the text size.

The general mechanism for resizing text is to have one link to increase the font size and one to reduce it. However, it can get tricky for the user to keep track of what the original size was, so sometimes people include a ‘reset font size’ button.

At this point the UI is starting to get a tiny bit complicated, so I was looking for a way to create a dead-simple widget with just 2 options – small font or big font. Keep it simple.

I’m sure someone has done this before, but I couldn’t find a script on Google that did everything I wanted, including changing the styling of the currently selected font size to make it obvious, as well as a cookie to make the size selection persistent across pages in the site. So I hacked around with a couple of other scripts I found and created a solution using JQuery.

The advantages of this solution are:

  • The UI is really clear and simple (you could make buttons instead of links if you like)
  • A separate class is toggled for the currently selected size
  • The resize links are only displayed if the user has javascript enabled
  • The font size selection is persistent across pages
  • The resize affects the font-size as set on the HTML body element. So all text that you want to be resized needs to be sized in percentages or ems. If there are some elements you don’t want to be affected by the resizing, you can specify their size separately in pixels.
  • Unobtrusive Javascript

A few notes:

  • By loading the JQuery library from Google’s servers, it’s likely that the code will already be cached, thus saving download time
  • You need to include the JQuery Cookie plugin separately
  • Font sizes for LARGE and SMALL need to be set in the JS file
  • The links need to be set to display: none within your stylesheet so they are hidden by default. They are then revealed for JS-capable browsers only

I got the basic idea for how to approach this using JQuery from a post on ShopDev.

7 thoughts on “A really simple font resizer using JQuery

  1. Pingback: Quick Tip: JavaScript Event Delegation in 4 Minutes | Tutorial Blog | JavaScript WebDev Insider

  2. Pingback: data mining

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>