• Live Demos

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.

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:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<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:

<script type="text/javascript">
jQuery(document).ready( function() {
   jQuery( "<resize button selector>" ).textresizer({
      target: "<element selector>"
   });
});
</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”.

<div id="textsizer">
   <p>Font Size:<p>
   <ul class="textresizer">
       <li><a href="#nogo">S</a></li>
       <li><a href="#nogo">M</a></li>
       <li><a href="#nogo">L</a></li>
       <li><a href="#nogo">XL</a></li>
   </ul>
</div>

CSS follows below:

/**********************************
	Text Resizer Buttons
 **********************************/
#textsizer
{
	margin-bottom: 6px;
}
	#textsizer p
	{
		display: inline;
	}
ul.textresizer
{
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
	ul.textresizer li
	{
		display: inline;
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}

	ul.textresizer a
	{
		border: solid 1px #999;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
	}

	ul.textresizer a:hover
	{
		background: #e5e5e5;
		border: solid 1px #cccccc;

	}

	ul.textresizer .small-text
	{
		font-size: 11px;
	}

	ul.textresizer .medium-text
	{
		font-size: 13px;
	}

	ul.textresizer .large-text
	{
		font-size: 15px;
	}

	ul.textresizer .larger-text
	{
		font-size: 17px;
	}

	/* Style of active button */
	ul.textresizer a.textresizer-active
	{
		border: solid 1px #2B562B;
		background: #FFCA6F;
		color: #000000;
	}
/* End of Text Resizer Buttons */

Invoking the Plugin

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

jQuery(document).ready(function() {
    jQuery("#textsizer a").textresizer({
		target: "#maincontent"
	});
});

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.

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 sizes array. Note that the type: “fontSize” setting is commented out because it is the default setting.

jQuery(document).ready( function() {
	jQuery( "#textsizer a" ).textresizer({
		target: "#maincontent",
		// type:   "fontSize",
		sizes:  [ ".8em", "1em", "1.5em", "2em", "2.5em" ]
	});
});

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 selectedIndex setting is used to inform the user that the “medium-text” size is the selected font size.

jQuery(document).ready( function() {
  jQuery( "#textsizer-classnames a" ).textresizer({
     target: "#maincontent",
     type: "cssClass",
     sizes: [
        "small-text",
        "medium-text",
        "large-text",
        "larger-text"
     ],
     selectedIndex: 1
  });
});

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.

<div id="textsizer-classnames">
   <p>Font Size:</p>
   <ul class="textresizer">
      <li><a href="#nogo" class="small-text" title="Small">A</a></li>
      <li><a href="#nogo" class="medium-text" title="Medium">A</a></li>
      <li><a href="#nogo" class="large-text" title="Large">A</a></li>
      <li><a href="#nogo" class="larger-text" title="Larger">A</a></li>
   </ul>
</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:

#textsizer-classnames
{
	margin-bottom: 6px;
}
	#textsizer-classnames p
	{
		display: inline;
	}
ul.textresizer
{
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
	ul.textresizer li
	{
		display: inline;
		margin: 0px;
		margin-right: 5px;
		padding: 0px;
	}

	ul.textresizer a
	{
		border: solid 1px #999;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
	}

	ul.textresizer a:hover
	{
		background: #e5e5e5;
		border: solid 1px #cccccc;

	}

	ul.textresizer .small-text
	{
		font-size: 11px;
	}

	ul.textresizer .medium-text
	{
		font-size: 13px;
	}

	ul.textresizer .large-text
	{
		font-size: 15px;
	}

	ul.textresizer .larger-text
	{
		font-size: 17px;
	}

	ul.textresizer a.textresizer-active
	{
		border: solid 1px #2B562B;
		background: #FFCA6F;
		color: #000000;
	}

#maincontent
{
}
	#maincontent.small-text
	{
		font-size: 11px;
	}

	#maincontent.medium-text
	{
		font-size: 13px;
	}

	#maincontent.large-text
	{
		font-size: 15px;
	}

	#maincontent.larger-text
	{
		font-size: 17px;
	}

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.

jQuery(document).ready( function() {
	jQuery( "#textsizer a" ).textresizer({
		target: "#maincontent",
		type: "css",
		sizes: [
			// Small. Index 0
			{ "font-size"  : "80%",
			  "color"      : "red"
			},

			// Medium. Index 1
			{ "font-size"  : "100%",
			  "color"      : "blue"
			},

			// Large. Index 2
			{ "font-size"  : "120%",
			  "color"      : "darkgreen"
			},

			// Larger. Index 3
			{ "font-size"  : "140%",
			  "color"      : "purple"
			}
		],
		selectedIndex: 1
	});
});

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”:

ul.textresizer a.textresizer-active
{
  border: solid 1px #2B562B;
  background: #FFCA6F;
  color: #000000;
}

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

<div id="textsizer">
   <p>Font Size:</p>

   <ul class="textresizer">
	   <li><a href="#nogo" class="small-text" title="Small">A</a></li>
	   <li><a href="#nogo" class="medium-text" title="Medium">A</a></li>
	   <li><a href="#nogo" class="large-text textresizer-active" title="Large">A</a></li>
	   <li><a href="#nogo" class="larger-text" title="Larger">A</a></li>
   </ul>

</div>

Live Demonstrations

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

• Font Sizes
• CSS Classes
• Embedded CSS Properties
• Multiple Instances