Simple Implementation of FontSizer
This example demonstrates the simple setup of the FontSize Change JavaScript for resize of text throughout your documents. Try the adjustment links on the right to see the effect.
Other examples demonstrate the ability of the code to more precisely control text resize. See the list of examples in the right column and more information below.
Instructions
Basic instructions for Font Size Change Code setup, as described in the Documentation are as follows: include script tags pointing to the external JavaScript files, a div to contain the size change links and a call to an initialization function.
This basic set up of the font-size change code will be effective if your style sheets are set up primarily using relative font-sizes. For example, the current document specifies the body font-size in pixels. All other font sizes are specified using em's or percentages. The download file contains examples with other style sheet specifications.
This approach is suitable if you have specified body font-size using any unit of measurement: pixels, points, percentages, em's, or a keyword constant, or if you are relying exclusively on browser default size settings.
If you click a repeatedly on the adjustment images on the right you will see that all page elements participate in the text resize. You can control the range of font-size adjustment with code settings, at the top of the JavaScript file or by using the setDefaults method:
// size unit, default size, minimum, maximum
dw_fontSizerDX.setDefaults('px', 12, 9, 32);
You can also use the setDefaults methods to specify em's or percentages as the unit of measurement. The documentation demonstrates.
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.