Controlling or Excluding from Text Size Change
This page demonstrates and describes how to implement the FontSizer Code so that almost all page elements participate in the text size adjustment while a few are either restricted or excluded. 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 and set methods, also described in the documentation, to specify that most page elements can participate in the resize with a few restricted or excluded.
Basic documents demonstrating this and other examples are included in the download file.
More About This Example
The setDefaults method is used to specify overall defaults for the code. If you are specifying font sizes on many elements with or without classes or id's[1] using pixels, points or other absolute units of measurement and you wish to use the code to to adjust the text size of those elements, you would include them in the setDefaults method as follows:
// size unit, default size, minimum, maximum,
// list of selectors to apply these defaults to
dw_fontSizerDX.setDefaults('px',13,9,23,['body','td','p','div','span']);
Or, if like the current document, you have most page elements' font size set using relative units of measurement, you would use setDefaults as follows to apply the settings to the body allowing other elements to inherit:
dw_fontSizerDX.setDefaults( 'px', 13, 9, 23, ['body'] );
Now after specifying that most of the document will have a relatively generous range of font sizes, we wish to either exclude or constrain the size adjustment of a few others. For that we use the set method. To demonstrate, we control the size range of the sidebar and pre tags. We set their maximum font size to 16 so they won't get too large for our layout with the following:
// default size, min, max, selector(s) dw_fontSizerDX.set(12, 9, 16, ['div#sidebar'] ); dw_fontSizerDX.set(12, 10, 16, ['pre'])
We exclude the logo at top and the copyright notice at bottom from the resize by setting their default, minimum and maximum font sizes to a fixed pixel value:
// default size, min, max, selector(s) dw_fontSizerDX.set(26, 26, 26, ['div#logo span'] ); dw_fontSizerDX.set(11, 11, 11, ['div#copyright span'] );
The documentation provides more details about the setDefaults and set methods described above as well as specific instructions and other information about the code.
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.
- As noted in the documentation, since the code in effect applies inline styles, these override style sheet specifications which would otherwise be more specific. ^