Categories:

Home / Free JavaScripts / Text Effects / Here

Cut & Paste Document Text Resizer

Credit: JavaScript Kit

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;
}


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.