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. Click on the text size controls on the right to see the effect. Notice that while the paragraph text and the sidebar font sizes are adjusted, 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. Basic documents demonstrating this and other examples are included in the download file.
More About This Example
The documentation provides basic instructions for setup of the code: include the script tags, a div for text size links, and initialize. This example demonstrates the use of setDefaults and set methods to specify which page elements can participate in the resize and the range of size adjustment.
For this example we demonstrate how to focus the resize on the main paragraph text on the page. We use the setDefaults method to roughly match the font size specified in the style sheet and give a fairly generous range of size adjustment:
// size unit, default size, minimum, maximum, list of selector(s) dw_fontSizerDX.setDefaults( 'px', 13, 9, 21, ['div#text p'] );
We also want to allow some resize of sidebar content, but not as generous so it won't break our layout:
// default size, min, max, selector(s) dw_fontSizerDX.set(12, 9, 16, ['div#sidebar'] );
The documentation provides more details about the code's support for a variety of selectors in the setDefaults and set methods and more general information about their use.
More About the Code and Other Examples
The FontSize Change JavaScript is very flexible. The code can be used to control the size of text in your documents no matter where or how you have specified font size or other styles. You can use it to precisely control what can be resized and how much or apply the resize to text throughout your pages.
Other examples, listed in the right column, demonstrate and describe the code's range of usage. Basic example documents in the download file will assist you in implementing the code to suit your purposes. The documentation provides specific instructions and more information about the code.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.