Global Text Resize
This example demonstrates an easy setup of the FontSize Change JavaScript for resize of text throughout your documents. Try the text size links on the right to see the effect.
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 use of the setDefaults method, also described in the documentation, to specify that all page elements can participate in the resize no matter how you may have specified font sizes on these elements in your style sheets.
A basic document demonstrating this implementation is included in the download file.
More About This Example
The font size change code works in conjunction with your style sheets. It works differently depending upon how you specify font size in your documents. If you have applied font size to large numbers of page elements, no matter what units of measurement, you can tell the code to resize those elements by including them in the list of selectors passed to the setDefaults method.
Clicking the text size links causes the style sheet specifications to be overridden and allows a resize of these page elements. This is accomplished with the following:
// size unit, default size, minimum, maximum, array of selectors
dw_fontSizerDX.setDefaults('px',13,9,25,['body', 'td', 'div', 'p', 'font']);
Example Page Elements
A paragraph with a class attached and font-size set 12px.
| A table cell with a class attached and font-size set 12px. |
| text in table cell inside font tag with size -2 |
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.