Setting up FontSizer Controls
This page discusses the unobtrusive event handling setup for the FontSize Change JavaScript. There are two ways to set up the controls: you can include the sz_controls.js file, which will set up the images or text links for you, or you can place them in the div yourself and the code will attach the event handlers.
You can specify images of your choice, or text links if you prefer, with both methods. Examples in the download file include the images in the sizer div. One example document demonstrating the use of the alternate controls file is included there also.
Instructions
As described in the documentation, a div element with an ID of sizer needs to be included where you wish the controls to appear. Place the script tag for the controls in the head of the document following the others to have the code place text or image links of your choice there for you:
<script src="js/dw_cookies.js" type="text/javascript"></script> <script src="js/dw_sizerdx.js" type="text/javascript"></script> <script src="js/sz_controls.js" type="text/javascript"></script>
Near the top of the sz_controls.js file, code comments indicate where to specify images (or text) and title content of your choice.
The following demonstrates inclusion of image links for the controls with the necessary id and class attribute values in place, if for some reason you prefer this to the above method:
<div id="sizer">
<a class="increase" href="#" title="Increase text size">
<img src="images/plus.gif" alt="" /></a>
<a class="decrease" href="#" title="Decrease text size">
<img src="images/minus.gif" alt="" /></a>
<a class="reset" href="#" title="Restore default font-sizes">
<img src="images/reset.gif" alt="" /></a>
</div>
If you are going to place the sizer image or text links in the div, remove the script tag for the sz_controls.js file from the head of your document. The code to set up event handlers relies on the increase/decrease/reset classes in the links, so don't remove them.
Note: A blue border will appear around linked images unless you indicate otherwise, either in the border attribute of the image tag (border="0") or in the style sheet. If you are using a strict doctype and want your document to validate place the following in the style sheet:
a img { border:none; }
Style Specifications for Controls
The examples in the download file that include the linked images in the source code introduce a carriage return, as shown above. You can of course remove that if you like, since high maximum font-size values will make that space quite large. You can otherwise control sizer div styles to suit your layout and design.
Documents that use sz_controls.js to add images will likely benefit from a style to give breathing room between images:
div#sizer img {
margin-right:2px;
}
Adjust to suit your design and layout requirements.
More Information
The FontSize Change JavaScript is very flexible and able to work with style sheets set up any number of ways. The Documentation provides details and points to examples demonstrating the code's flexibility. Basic example documents in the download file will assist you in implementing the code to suit your purposes.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.