Cut & Paste Document Text Resizer
|
Description: Document Text Resizer adds the
ability for your users to toggle your webpage's font size, with persistent
cookies then used to remember the setting. The script works unobtrusively and
with any webpage, by adding to the page one of several CSS classes (on the
<HTML> element itself) that change the page's font size depending on the
setting clicked on. You can even custom tailor the CSS classes to only
target a portion of the page (ie: just the content area), so just that area's
text size changes.
Example: 
Directions:
Step 1: Insert the below code into the head section of your page, following (not proceeding) any other external CSS style sheets:
Download the two files referenced by this code (right click, and select "Save As"):
Step 2: Insert the sample HTML controls to the BODY of your page to toggle the text size on the page, with 5 different text sizes offered:
This code references 5 sample images used for the controls, which you can download here:
How the script works
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;
}