Introducing jQuery Text Resizer

The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site. That being said, of course make sure you’re on a decent web host. If you have any trouble finding a good website hosting providers, have a look at this best web hosting comparison for the USA.

Whether you want to improve the functionality or visibility of your website, then jQuery Text Resizer Plugin is an excellent solution for you. This tool can be fully customized and offer multiple features even for beginners. You can change the font size and adjust it through the entire article, so it saves time.

This is my first jQuery plugin. I’ve never found the need to develop my own because a lot of talented developers have created many wonderful plugins for the awesome jQuery JavaScript framework. Over the past year and half I’ve grown in my appreciation of this technology.

In July of 2009, 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’ve 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 http://www.dynamicdrive.com/dynamicindex9/textsizer.htm(FYI, don’t bother clicking on the author’s “Homepage” link; it doesn’t work).

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 TextSizer’s script 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. One guest speaker at the Findlay .Net User’s Group said that it was a “bad practice” to write inline JavaScript in HTML element event attributes and that jQuery helped to separate this. You know who you are. Thanks for inspiring me to improve my coding practices!

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

Dependencies

The Text Resizer plugin depends the following components.

• The awesome jQuery 1.3.2 JavaScript library or later.
• The jQuery Cookie Plugin: Though it is not required, it is recommended for the sake of improved (and expected) user experience. The Text Resizer plugin checks whether the jQuery Cookie plugin is installed.

Referencing

Reference jQuery, the Cookie and Text Resizer plugins in the HEAD section of your HTML document:

1.<script src=”jquery.js” type=”text/javascript”></script>

2.<script src=”jquery.cookie.js” type=”text/javascript”></script>

3.<script src=”jquery.textresizer.js” type=”text/javascript”></script>

Basic Syntax

The basic syntax for invoking the Text Resizer plugin is as follows. This code segment should appear after the above three script references or wherever you prefer to place your JavaScript, such as before the closing BODY tag:

1.<script type=”text/javascript”>

2.jQuery(document).ready( function() {

3.jQuery( “<resize button selector>” ).textresizer({

4.target: “<element selector>”

5.});

6.});

7.</script>

where:

• <resize button selector> is a valid jQuery selector pattern. The resize button selector references a list of buttons (which can be <A> tags).
• <element selector> is a valid jQuery selector pattern that targets the block of text to resize.
• The .textresizer() method invokes the Text Resizer plugin.

Structuring Resize Buttons

The main idea is to create a list of buttons, each of which the user will click to resize the targeted content in the HTML document. The buttons can be anything. They can be mere <input type=”button” /> elements or the humble anchor tag (<A>). How you organize that list of elements is entirely up to you. All that the Text Resizer plugin cares about is that a list of buttons is required. Here’s an example that uses an unordered list with class “textresizer” enclosed in a DIV element, which uses the ID “textsizer”.

01.<div id=”textsizer”>

02.<p>Font Size:<p>

03.<ul class=”textresizer”>

04.<li><a href=”#nogo”>S</a></li>

05.<li><a href=”#nogo”>M</a></li>

06.<li><a href=”#nogo”>L</a></li>

07.<li><a href=”#nogo”>XL</a></li>

08.</ul>

09.</div>

CSS follows below:

01./**********************************

02.Text Resizer Buttons

03.**********************************/

04.#textsizer

05.{

06.margin-bottom: 6px;

07.}

08.#textsizer p

09.{

10.display: inline;

11.}

12.ul.textresizer

13.{

14.list-style: none;

15.display: inline;

16.margin: 0px;

17.padding: 0px;

18.}

19.ul.textresizer li

20.{

21.display: inline;

22.margin: 0px;

23.margin-right: 5px;

24.padding: 0px;

25.}

27.ul.textresizer a

28.{

29.border: solid 1px #999;

30.padding: 2px 3px;

31.font-weight: bold;

32.text-decoration: none;

33.}

35.ul.textresizer a:hover

36.{

37.background: #e5e5e5;

38.border: solid 1px #cccccc;

40.}

42.ul.textresizer .small-text

43.{

44.font-size: 11px;

45.}

47.ul.textresizer .medium-text

48.{

49.font-size: 13px;

50.}

52.ul.textresizer .large-text

53.{

54.font-size: 15px;

55.}

57.ul.textresizer .larger-text

58.{

59.font-size: 17px;

60.}

62./* Style of active button */

63.ul.textresizer a.textresizer-active

64.{

65.border: solid 1px #2B562B;

66.background: #FFCA6F;

67.color: #000000;

68.}

69./* End of Text Resizer Buttons */

Invoking the Plugin

Assuming the setup illustrated above and that the Text Resizer should targetthe contents of a DIV block with ID “maincontent”, the Text Resizer plugin can now be invoked like this:

1.jQuery(document).ready(function() {

2.jQuery(“#textsizer a”).textresizer({

3.target: “#maincontent”

4.});

5.});

The above jQuery snippet selects all anchor tags (<A> tags) in the HTML block uniquely identified by the “textsizer” ID.  It then attaches a click event handler to each anchor tag for each available text size in successive order and targets the block of HTML with ID #maincontent.

Options

The Text Resizer plugin has the following advanced options. Realistically, I foresee many people using the advanced features more rather than the basic configuration shown above.

Property	Description	Example
target	The target is a valid jQuery selector. This property represents the block of HTML that will be resized by the plugin. The default value is the bodytag, but it is recommended to specify where the resizing should take effect. Defining a specific section in an HTML document allows us to create some interesting text resizers, such as multiple text resizers per page. I’ve never seen that, but I cannot envision how others will use this plugin.	/* Targets an element identified by the ID “content” */ target: “#content”or/* Targets paragraph tags in DIV tag with class “content”. */ target: “div.content p”
type	Possible values “fontSize”, “css”or “cssClass”. “fontSize” Informs the plugin that fixed font sizes (such as px, em %, and pt) will be used. This is the default setting. The default unit is px (pixels). The smallest size is 14px, medium 16px (1em or normal), and it keeps incrementing in intervals of 2 units up to the number of resize buttons. Therefore, if there are 4 resize buttons, there will be 4 different sizes in the following order: 14px, 16px, 18px, and 20px. “css” Indicates that CSS style properties will be used to define the exact appearance of the resized text. More will be said later. “cssClass” Indicates that CSS class names will be used to define available font sizes. Recommended setting.	See examples below.
sizes	This property defines a JavaScript array of font sizes that will be available in the page. The number of elements in the array must be equal or greater than the number of resize buttons in the page. If this condition fails, the plugin will cease its execution.	See examples below.
selectedIndex	Indicates which font size in the sizes array above should be selected by default when the user visits the page for the first time. This is the zero-based index of an element defined in the sizes array; that is, the first element is 0, the second is 1, the third is 2, and so on. The plugin uses the textresizer-active CSS class for this purpose. See below for an example.	/* Applies the font size definition in the third element of the sizes array and decorates its corresponding resize button with the textresizer-activeCSS class. */ selectedIndex: 2

Examples

To make things clearer, here are a few examples of the Text Resizer plugin with each of its type settings. Note the difference in the jQuery selectors for each type below. This is very important if you have multiple instances of the plugin in the same page. I have a link to a live example at the bottom of this page.

type: “fontSize”

This code selects all anchor tags located in the element with ID “textsizer”. It then targets an element with ID of “maincontent”, specifies that the font size type is a list of font sizes and defines the list of possible font sizes in the sizesarray. Note that the type: “fontSize” setting is commented out because it is the default setting.

1.jQuery(document).ready( function() {

2.jQuery( “#textsizer a” ).textresizer({

3.target: “#maincontent”,

4.// type:   “fontSize”,

5.sizes:  [ “.8em”, “1em”, “1.5em”, “2em”, “2.5em” ]

6.});

7.});

type: “cssClass”

The type: “cssClass” option is my recommended setting because you can style both the resize buttons and the target section in the HTML document, albeit it isn’t the default setting. In the example below, we are selecting the anchor tags located in the element marked with the “textsizer” ID. The “textsizer” represents the resizer buttons. We then specify that the text to resize will be located in an HTML block with an ID of “maincontent”. The different font sizes will be defined by four CSS classes (small-text, medium-text, large-text and larger-text)–Note that these CSS class names are not prefixed with a period (.). Since we are using CSS class names, we must use the “cssClass” value of the type setting. Notice that the selectedIndexsetting is used to inform the user that the “medium-text” size is the selected font size.

01.jQuery(document).ready( function() {

02.jQuery( “#textsizer-classnames a” ).textresizer({

03.target: “#maincontent”,

04.type: “cssClass”,

05.sizes: [

06.”small-text”,

07.”medium-text”,

08.”large-text”,

09.”larger-text”

10.],

11.selectedIndex: 1

12.});

13.});

When using the “cssClass” setting, you can then assign the same class names you specified in the sizes array to each resize button, as shown below.

01.<div id=”textsizer-classnames”>

02.<p>Font Size:</p>

03.<ul class=”textresizer”>

04.<li><a href=”#nogo” class=”small-text” title=”Small”>A</a></li>

05.<li><a href=”#nogo” class=”medium-text” title=”Medium”>A</a></li>

06.<li><a href=”#nogo” class=”large-text” title=”Large”>A</a></li>

07.<li><a href=”#nogo” class=”larger-text” title=”Larger”>A</a></li>

08.</ul>

09.</div>

This is why I prefer using this method. You can then define the exact look and feel of each resizer button and the content to resize in your style sheet. Here’s an example:

01.#textsizer-classnames

02.{

03.margin-bottom: 6px;

04.}

05.#textsizer-classnames p

06.{

07.display: inline;

08.}

09.ul.textresizer

10.{

11.list-style: none;

12.display: inline;

13.margin: 0px;

14.padding: 0px;

15.}

16.ul.textresizer li

17.{

18.display: inline;

19.margin: 0px;

20.margin-right: 5px;

21.padding: 0px;

22.}

24.ul.textresizer a

25.{

26.border: solid 1px #999;

27.padding: 2px 3px;

28.font-weight: bold;

29.text-decoration: none;

30.}

32.ul.textresizer a:hover

33.{

34.background: #e5e5e5;

35.border: solid 1px #cccccc;

37.}

39.ul.textresizer .small-text

40.{

41.font-size: 11px;

42.}

44.ul.textresizer .medium-text

45.{

46.font-size: 13px;

47.}

49.ul.textresizer .large-text

50.{

51.font-size: 15px;

52.}

54.ul.textresizer .larger-text

55.{

56.font-size: 17px;

57.}

59.ul.textresizer a.textresizer-active

60.{

61.border: solid 1px #2B562B;

62.background: #FFCA6F;

63.color: #000000;

64.}

66.#maincontent

67.{

68.}

69.#maincontent.small-text

70.{

71.font-size: 11px;

72.}

74.#maincontent.medium-text

75.{

76.font-size: 13px;

77.}

79.#maincontent.large-text

80.{

81.font-size: 15px;

82.}

84.#maincontent.larger-text

85.{

86.font-size: 17px;

87.}

type: “css”

This is an advanced setting for those users who prefer writing up the exact CSS to apply to the resized content. Think of it as an embedded style sheet. In fact, it is an embedded stylesheet.

In my example below I am defining 4 different text sizes:

1. The first one (Small. Index 0) tells the plugin that the font size will be at 80% of the “normal” font size defined by the HTML document’s stylesheet. I am also telling the text resizer plugin that the color of the small text should be red.
2. The second one (Medium. Index 1) defines the font size as 100% of the “normal” font size and the color is blue. The selectedIndex option tells the plugin that this is the default setting.
3. The third option (Large. Index 2)  specifies the font size as 120%. A bit larger than normal. The color is defined as dark green.
4. Finally, the fourth option denoted by the comment “Larger. Index 3″ specifies that the font size is 140% and that the color of the resized text should be purple.

This example tells the text resizer plugin to attach itself to a list of buttons (anchor tag) in an element marked with the ID “textsizer”. The target, that is the content to resize, is in an HTML block identified with the unique ID “maincontent”.

For more information on how to define CSS properties in JavaScript, visit the jQuery documentation on css( properties ). The syntax defined there is the same I am using here.

01.jQuery(document).ready( function() {

02.jQuery( “#textsizer a” ).textresizer({

03.target: “#maincontent”,

04.type: “css”,

05.sizes: [

06.// Small. Index 0

07.{ “font-size”  : “80%”,

08.”color”      : “red”

09.},

11.// Medium. Index 1

12.{ “font-size”  : “100%”,

13.”color”      : “blue”

14.},

16.// Large. Index 2

17.{ “font-size”  : “120%”,

18.”color”      : “darkgreen”

19.},

21.// Larger. Index 3

22.{ “font-size”  : “140%”,

23.”color”      : “purple”

24.}

25.],

26.selectedIndex: 1

27.});

28.});

Styling the Active Size

The Text Resizer plugin uses the CSS class name .textresizer-active to indicate which button is active. It appends this class name to the button that is clicked on. For example:

CSS:
Assuming that the resize button is in an anchor tag located in an unordered list marked with the class “.textresizer”:

1.ul.textresizer a.textresizer-active

2.{

3.border: solid 1px #2B562B;

4.background: #FFCA6F;

5.color: #000000;

6.}

The HTML then renders as follows, where the active button is the “Large” font size.

01.<div id=”textsizer”>

02.<p>Font Size:</p>

04.<ul class=”textresizer”>

05.<li><a href=”#nogo” class=”small-text” title=”Small”>A</a></li>

06.<li><a href=”#nogo” class=”medium-text”title=”Medium”>A</a></li>

07.<li><a href=”#nogo” class=”large-text textresizer-active”title=”Large”>A</a></li>

08.<li><a href=”#nogo” class=”larger-text”title=”Larger”>A</a></li>

09.</ul>

11.</div>

Live Demonstrations

Now that I have explained the different settings available in the Text Resizer plugin, here are a few live examples: