[ UNDER CONSTRUCTION ]

This is a Drupal module wrapper for the jQuery Fontsizer plug-in originally created by Stefan Sedich and extended by me. This plug-in allows end-users to change the size of the fonts used in a given theme. This module also the developer to target specific HTML objects in order to limit what content is to be affected by font-resizing. For example, the developer may decide that only node content is to change size while the rest of the page remains unchanged.

This wrapper module supports all settings and attributes of the jQuery plug-in, and the module also contains a sample Drupal block that displays a button row to allow end-users to increase/decrease font size. This sites uses that button row (see top-left corner) to allow users to change the font size of the node content, but nothing else.

It's very easy to use this module wrapper and you can use it in your own modules and blocks, and even in your theme. This particular page uses 3 instances of the Fontsizer.

In the top-left corner of the screen you can see the theme-embedded version. It controls the node content on a given page, but it does not affect anything else.

On the sidebar you see the "jQuery Fontsizer" demo block which holds 2 instances of the Fontsizer control. The control in the block header only controls the text inside the block, while the control inside the block controls the blue demo area on this page.

Normally one would obviously not have 3 controls on a single page, and the plug-in is really designed for single instance (at least for now). But as you can see, it can be used in many different ways.

The Fontsizer supports 3 main functions that allow you to increase, decrease, and reset the font-size. Of course, that means in most instances you'd want to have a button-row with 3 corresponding buttons.

On this site I use the the following HTML code block to create such button-row:

[...]
<span id="fontsizer">
  <a onClick="$.FontSizer.DecreaseSize('.scale');">
  <img src="[ .. button image .. ]" alt="Decrease font size" />
  </a>
  <a onClick="$.FontSizer.IncreaseSize('.scale');">
  <img src="[ .. button image .. ]" alt="Increase font size" />
  </a>
  <a onClick="$.FontSizer.Reset('.scale');">
  <img src="[ .. button image .. ]" alt="Reset font size" />
  </a>
</span>
[...]

...