About jQuery Text Resizer Plugin

The jQuery Text Resizer Plugin allows you to create controls for changing the font size of one or more elements on a page. It gives your users a fine degree of control over font sizes. It is flexible in that it lets you specify exactly how to resize text, how it should be styled (via CSS or CSS3), where in your page it should be resized, and how the font size controls are to be structured.

Though modern Web browsers do offer text-resizing functionality, many Web users aren't aware that these features exist and might appreciate a convenient method to control the font size of the content they're reading. Since not all users browse your Web pages with a desktop or laptop, modern Web development demands designing with mobile devices in mind. Screen sizes vary per device, and so do font sizes. Typography is more important than ever. jQuery Text Resizer can aid you in creating the controls for sizing content on demand.

The plugin works in tandem with the jQuery Cookie plugin so that it's able to remember the user's settings on their next visit (if they have cookies enabled, of course).

History of the Plugin

jQuery Text Resizer was my first plugin in September of 2009. Before that I had never found the need to develop my own because a lot of talented developers already created many wonderful plugins for the awesome jQuery JavaScript library.

In July of 2009 at my former employer, I was presented with a request to put in place a text resizer for a design one of my coworkers was working on. I was assisting her with converting her design concept to a Web standards design based on HTML and CSS. I thought that placing a text resizer control would be a simple task. In practice, it is. I had done it for at least two websites. Those two websites use a DHTML Script developed by Taewook Kang, which can be viewed and downloaded at "Document Text Sizer" - Dynamic Drive.

I like the script and I believe it is a good one. One feature it lacked was the ability to remember the user's choice. Therefore, when you resized the text on the site's homepage and browsed to an inside page, the previously selected font size would be lost and the user would be forced to resize the text again. Not user-friendly. I modified that script when I worked on TheCourier.com so that it would remember the user's choice by saving it to a cookie. In fact that was a long awaited feature by some users. The modified version works great, but I never made it available for download.

Because I had already invested my time in modifying the TextSizer script by Mr. Kang, there was no point for me to reinvent the wheel. However, the site my coworker and I were working on was using the SuperFish jQuery plugin for the main and sidebar navigation. I decided to look for a jQuery solution.

I was disappointed to find out that there weren't many options. In fact, I only found one existing plugin at the jQuery plugins directory. I also did a short search on Google. I wasn't too fond of the existing solutions. I also considered using a style switcher, but that seemed like an overly complex solution. Why in the world should I create 3 or 4 different CSS files for just resizing text?

What I like about Taewook Kang's Text Sizer is that it lets you create a list of available font sizes and then you can either traverse the array of font sizes by using an increase or decrease font size button, or by simply invoking a function, passing it the target HTML to resize and the index of the font size stored in the array. Those existing jQuery plugins that I looked at did not do that--or perhaps I didn't look carefully. I chose to skip Taewook Kang's script for the sake of writing unobtrusive JavaScript.

My plugin is inspired by Taewook Kang's TextSizer script but it is a completely new and fresh implementation.