Applying Text Size Change to Limited Areas
This example demonstrates how you can set up the FontSizer code to allow users to change text size onclick in only one or a few portions of your document. See below for more information about other implementations of this very flexible code.
Instructions and Information
The Documentation provides the basic instructions for setup of the code. This example demonstrates the invocation of the setDefaults and set methods to specify which page elements can participate in the resize and the range of size adjustment.
With the following settings, only paragraphs in the div with id text and elements that inherit size from the div with an id of sidebar will be resized:
dw_fontSizerDX.setDefaults( 'px', 13, 9, 21, ['div#text p'] ); dw_fontSizerDX.set(12, 9, 16, ['div#sidebar'] );
Click on the adjustment controls on the right to see the effect. Notice that the masthead, footer, bread crumb trail and headings do not participate in the resize.
You can also take the reverse approach and allow resize on almost all portions of your layout but tightly restrict or exclude a few areas.
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.