Client Portal Language
 
HomeKnowledge BaseHTML Tips and tricksInstant-change w/ memory font-size enlargement feature.
Information
Article ID108
Created On9/30/2009
Modified9/30/2009
Share With Others
Instant-change w/ memory font-size enlargement feature.

Instant-change w/ memory font-size enlargement feature.

This feature enlarges the fonts of text and menu items on a webpage without requiring a page reload.  In addition, cookies are used to "remember" the font-size preference of the visitor throughout the site for up to 1 year beyond the last site visit. 

There are 5 font-size enlargement steps.

The final step returns the fonts to normal, and clears the cookie.  This clearing step does require a page reload to occur.

CMS Versions 3.1.6.3 and higher natively support the new instant-change font-size enlargement feature.  To add this functionality to a website in CMS versions 3.1.6.3 and higher, follow the steps for either of the 3 methods below.  (See below for instructions on adding this feature to legacy systems 3.1.6.2 and lower, as well as non-cms & static websites)

1. Add the font-size control as a text hyperlink
   A. Add the JavaScript event:  href="javaScript:CMS_toggle_font();"
   B. Add style (if desired): style="text-decoration:underline;"
   C. Example

   <a style="text-decoration:underline;" href="javaScript:CMS_toggle_font();">Enlarge Text</a>

2. Add the font-size control as an image control
   A. Add the onClick event:  onClick="CMS_toggle_font();"
   B. Add the following style:  style="cursor:pointer;"
   C. Example:

   <img src="image.jpg" onClick="CMS_toggle_font();" style="cursor:pointer;" border="0" alt="Enlarge Text">

3. Add the font-size control to an HTML button
   A. Add the onClick event:  onClick="CMS_toggle_font();"
   B. Example:

   <input type="button" onClick="CMS_toggle_font();" value="Enlarge Text">

=====================================================================

Adding the feature to legacy systems 3.1.6.2 and lower, as well as non-cms & static websites

Download the required files here: Required Files

1. Include the cms_font_sizer_head.js file in the header of your static or CMS site.
2. Include the cms_font_sizer_foot.js file in the footer of your static or CMS site, just before the closing body tag.
3. Follow the instructions above for implementation.

File download link: http://dc2.directclarity.com/sites/devteam/Shared%20Documents/CMS/Downloads/Supporting%20Files/font_size.zip