Documentation
From
JavaScript Kit
The script works by applying to the document's <HTML>
element (the topmost element) the CSS class name specified in the text size
control the user clicks on. Controls are simply links with a rel attribute
pointing to the CSS class you wish to apply to the document. Here are 3 sample
controls:
<a href="#" class="texttoggler"
rel="smallview" title="small size"><img
src="smallview.png" /></a>
<a href="#" class="texttoggler" rel="normalview"
title="normal size"><img src="normalview.png" /></a>
<a href="#" class="texttoggler" rel="largeview"
title="large size"><img src="largeview.png" /></a>
So clicking on the first control applies the CSS class "smallview"
to the <HTML> element of the page, and so on. Lets take a peak
inside doctextsizer.css now, which defines the CSS classes
referenced in your controls:
.xsmallview{ /*CSS for "extra small font"
setting*/
font-size: 11px;
}
.smallview{ /*CSS for "small font" setting*/
font-size: 13px;
}
.normalview{ /*CSS to return page to default setting (with no additional CSS
rules added)*/
}
.largeview{ /*CSS for "large font" setting*/
font-size: 21px;
}
.xlargeview{ /*CSS for "extra large font" setting*/
font-size: 24px;
}
In general these CSS classes should only change the font size of
the document, though notice how the class "normalview" doesn't even
do that. This CSS class is referenced by the control that returns the page to
its original setting, and the most reliable way to do this is just to not add
anything new to the page. Whenever a control is clicked on, persistent cookies
are used to remember that setting, so when the user returns to the page, the
script automatically applies the corresponding CSS class to the document.
Fine tuning your CSS Classes
As noted, the CSS classes specified in the controls' rel
attribute are applied
to the root <HTML> element. The standard CSS inheritance and
specificity rules apply, so they may be influenced by other stylesheets, global
or inline, on your page, accordingly. This means it may be necessary to fine
tune your text size CSS classes in order for them to work correctly on your
page, by increasing their specificity, for example. Lets say the BODY of your
page is wrapped around in a DIV with a font size declared already:
<style type="text/css">>
.contentarea{
font-size: 16px;
}
</style>
<div class="contentarea">This is the main content area.</div>
In order for the Document Text Resizer script to affect the text
inside this DIV, you need to increase its CSS classes specificity to target the
DIV:
.xsmallview .contentarea{ /*CSS for "extra small font"
setting*/
font-size: 11px;
}
.smallview .contentarea{ /*CSS for "small font" setting*/
font-size: 13px;
}
.normalview .contentarea{ /*CSS to return page to default setting (with no additional CSS
rules added)*/
}
.largeview .contentarea{ /*CSS for "large font" setting*/
font-size: 21px;
}
.xlargeview .contentarea{ /*CSS for "extra large font" setting*/
font-size: 24px;
}
The above incidentally also has the effect of limiting the
script to just toggling the text size within the "contentarea" DIV,
and not outside of it. If you wish the script to affect text outside the DIV as
well, CSS specificity rules dictate you should make the following changes:
.xsmallview, .xsmallview .contentarea{ /*CSS for "extra small font"
setting*/
font-size: 11px;
}
.smallview,
.smallview .contentarea{ /*CSS for "small font" setting*/
font-size: 13px;
}
.normalview,
.normalview .contentarea{ /*CSS to return page to default setting (with no additional CSS
rules added)*/
}
.largeview,
.largeview .contentarea{ /*CSS for "large font" setting*/
font-size: 21px;
}
.xlargeview,
.xlargeview .contentarea{ /*CSS for "extra large font" setting*/
font-size: 24px;
}