Global Text Resize Using Element Selectors
This example demonstrates 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 and Information
The Documentation provides the basic instructions for setup of the code. This example demonstrates the invocation of the setDefaults method for use if your documents specify font sizes using absolute units of measurement such as points or pixels on a large number of page elements.
The FontSizer code works by obtaining references to elements using selector text specified either by default in the code or provided by you, the implementor of the code. If you have applied font-size to large numbers of page elements you can tell the code to adjust those elements' font-size by including them in the list of selectors passed to the setDefaults method.
Various elements in this page have classes or ID's attached and style sheets (in the head of this page) specifying their font-size in pixels.[1] Clicking the buttons 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, optional array of selectors dw_fontSizerDX.setDefaults( 'px', 13, 9, 25, ['body', 'td', 'div', 'p', 'font'] );
If you have also specified font-size of heading elements using points or pixels, you can use the set method to control their size adjustment:
// default size, minimum, maximum, array of selectors dw_fontSizerDX.set(18, 14, 32, ['h2', 'h3', 'h4'] );
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 |
The set method can be used to override the style sheet settings of any number of elements. This method of using the code is less efficient than when the code can obtain a reference to a container element and control the size of elements contained within it by inheritance. Lots of references to lots of elements means more work for the browser. Nonetheless, the code has been tested with long complex documents (even a plethora of nested tables and font tags galore) with success.
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.
- The code would work the same no matter what unit of measurement you had applied in your style sheet to the elements you wish to resize and included in the selectors list passed to setDefaults ^