FontSizer DX: Documentation

The FontSize Change JavaScript can be set up to work with your documents whether you specify font-sizes using em's, percentages, pixels, points, constants, or even font tags with size attributes, or even if you haven't set font-sizes at all.

This code, called FontSizer DX, is quite flexible and can be used in a wide variety of situations, either to enable users to control text size throughtout your document, on major portions of your layout, or only one or a few discrete sections. Examples demonstrate and provide instructions.

Basic Instructions

The following list outlines the steps for implementing the code in the simplest way.

1. Include script tags pointing to the external JavaScript files.
2. Place a sizer div in the document where you wish the controls to appear.
3. Initialize the code.

See a demonstration and more information about this basic approach. The download file includes this and other examples demonstrating code setup.

Depending upon the style sheets you are using in your documents you may also need to apply set methods described below. Other examples demonstrate and describe their use.

Script Tags

Place script tags for the external JavaScript files, adjusting the path according to your needs:

<script src="js/dw_cookies.js" type="text/javascript"></script>
<script src="js/dw_sizerdx.js" type="text/javascript"></script>

They can be placed in the head of your document or just before the close body tag. ^

Sizer Element

Place a div or other element with id sizer where you wish the controls (text links or images) to appear in your layout.

<div id="sizer"></div>

See more information about placement of image or text links and their unobtrusive event handling setup. ^

Initialize

The code is initialized with: dw_fontSizerDX.init(). The page elements the code is intended to work with need to exist at the time this function is called. The call to the function can be placed at the end of the document or it can be called onload or using the dom ready function of your choice. ^

If you do not achieve the desired results following the above steps read on for more details on how to control the code under different scenarios and for different purposes.

Examples Demonstrating Implementation

The approach to setting up the code depends upon how your style sheets currently control font-size, and upon the desired effect you wish to achieve, that is, whether you want global text resize or precise control over which page elements are resized.

• Simple Setup for global resize if your style sheets are set up primarily using relative font-sizes.
• Global resize for documents with style sheets containing many specifications using pixels or points.
• Resize specific portions of a document's layout.
• Exclude specific portions of a document from text resize.

The examples provide information about how they achieve the desired effect and under what circumstances a given approach is used. Read below for more information about controlling the resize, coordinating the code with your style sheets and inner workings of the code.

Controlling the Resize

Two easy-to-use methods allow you to control how the FontSizer code will interact with your documents: setDefaults and set. These two methods allow you to specify using selector text[1] which page elements' font-sizes can be adjusted and how much.

For example, the following invocation of the setDefaults method sets the unit of measurement, default size, minimum and maximum font-sizes and applies them to paragraphs with class article and table with id main. The set method below it sets the default size, minimum and maximum[2] font-sizes on table cells with class navs and the div with id ads.

// size unit, default, min, max, selector list (optional)
dw_fontSizerDX.setDefaults('px', 14, 9, 32, ['p.article', 'table#main'] );
// default, min, max, selector list
dw_fontSizerDX.set(12, 9, 18, ['td.navs', 'div#ads'] );

Notice that the set method does not include a unit of measurement argument. That is because the unit of measurement must remain consistent throughout the code.

The last argument to both the set and setDefaults methods is an array which can include as many selectors as you like. This code supports the use of element, class, id, and descendant (or contextual) selectors. That is, you can tell the code what you want resized by referring to:

• HTML elements, such as: p, td, or div, as in

  dw_fontSizerDX.setDefaults('px',14,9,24,['p','td','div'])

• class attached, for example: td.article (table cells with class article), li.subnav (list items with class subnav), or .title (any element with class title), as in

  dw_fontSizerDX.set(12,10,18,['li.subnav','.title'])

• id attached: div#article (a div with id article) or #main (any element with id main), as in

  dw_fontSizerDX.setDefaults('px',14,9,32,['table#main'])

• descendant selectors, that is, elements contained within other elements, such as: td p (paragraphs in table cells), or div ul li (list items inside unordered lists inside divs), as in

  dw_fontSizerDX.set(14,9,24,['td p','div ul li'])

• or a combination of the above, as in

  dw_fontSizerDX.setDefaults('px',14,9,24,['#main td.content p'])

Elements contained within the selectors you specifiy will inherit font-sizes based on the same principles as inheritance usually applies in style sheets. Since the code sets style inline it will override style sheet specifications for the elements in question.

Coordinating the Code with your Style Sheets

The code defaults are set up so that if you have your body font set to a relatively small size, for example using the small keyword[3], 12px or a roughly equivalent percentage or em value, you will not likely need to change anything in order to use the code using the simplest approach if other font-sizes are set using em's or percentages.

If you have set your font sizes significantly smaller or larger than this current norm you may need to make some adjustments to the code default settings in order to achieve the best results.

Generally, you will want to use the setDefaults and set methods to initialize the code to roughly the same font-sizes as are specified in your style sheet. That is, if you have set the font-size to 14px in the style sheet, on the body or some other primary page element, you would use setDefault to assign these values in the code, and apply them to some portion of your layout you want text size change applied to, for example:

dw_fontSizerDX.setDefaults('px', 14, 10, 24, ['div#content'] );

The default sizeUnit in the code is pixels. You can set the code to use em's or percentages as well. If your base font-size is set using em's or percentages this may be advisable since one can never be sure what a viewer's browser defaults may be. You can use the setDefaults method to set up the code to use em's or percentages as follows:

// for em's:
dw_fontSizerDX.setDefaults( 'em', .8, .6, 2 );

// for percentages
dw_fontSizerDX.setDefaults( '%', 90, 60, 200 );

If no selectors are passed to the setDefaults method the sizes will be applied to body and table cells.

The examples contain more details and information regarding code setup. See also the Troubleshooting section below if you are unable to get the code to for perform as you would like.

Code Settings and Inner Workings

The code obtains references to document elements based on selector text and sets the font-size on the element's style object. Any elements contained within that element may inherit the new size based on the usual rules of CSS inheritance. When font-size is set on an element's style object that is the equivalent of an inline style and overrides settings in the style sheets.

When the initialization function is called without use of the setDefaults or set methods, the code defaults are applied to the body and table cells (table cells since they do not properly inherent in Internet Explorer).

Code defaults are set near top of dw_sizerdx.js:

    sizeUnit: 'px',
    defaultSize: 13,
    maxSize: 25,
    minSize: 9,

You can modify the settings in the file itself or use the setDefaults method to do so, as demonstrated above.

The sizeUnit setting remains consistent throughout the code. That is you cannot have more than one unit of measurement in play for calculation purposes by the code. This in no way implies any need by the code to have a consistent unit of measurement used by the style sheets in documents it is applied to. The code can work with style sheets using any method of specifying font-size, including font tags, keyword constants and no font-size settings at all (except browser defaults).

Since the code works by obtaining a list of selectors to apply font-size to, it will have a much easier job if applied to a primary page element, perhaps body or a container div with an id attached whose elements inherit font-size. Nonetheless the code will work even with lengthy and complex table layouts where references must be obtained to each and every table cell.

Initial display of the page will show the text at the size specified in your style sheets. The code must wait until the page elements exist before applying sizes, for example, when a viewer visits a second page or revisits the site with size retained in a cookie.

Troubleshooting

Perhaps when you first click on a link to adjust the size, it changes too much or perhaps even goes in the wrong direction. That may be an indication that the settings applied in the code don't match your style sheet specifications. The default size needs to roughly match the size set in your style sheets for the default text element (whether applied to the body or paragraphs or table cells etc.)

Also check to be sure you have not reversed the order of arguments in any setDefaults or set methods you are using. The order is: default size, minimum, maximum, followed by list of selectors. See the example methods above.

If the cookie mechanism doesn't work: assuming the cookie file is in place, are you initializing the code before the page is loaded? The dw_fontSizerDX.init function needs to be called either at the end of the document after the page elements exist or onload or with a DOM ready function of your choice.

Further Information

Here are some links to information on CSS, for those unfamiliar with the terminology used here:

• Style Master's Complete CSS Guide
• Style Master's Complete CSS Guide: Selectors
• W3Schools CSS Tutorial
• WDG Guide to CSS

Back to top

• Home
• Site Map
• Code
  • Scrolling Div’s
  • Tooltips
  • Rotate Images
  • FontSizer
• Tutorials
  • Scripting Iframes
  • Combining Scripts
  • JavaScript Errors
  • Object Literals
• Business
  • Terms of Use
  • Licensing Information
  • Price List/Order Form
  • Donations
  • Policies
• Contact