Animated & Accessible jQuery Font Size Resizing Plugin - Creasefont

Creasefont is a text size control plugin for jQuery that allows the visitor to alter the font size with an animation on the whole website or only in specific html elements.

Additional Features:

• Works with cookie to remember the font size settings even after page reloads (if cookies enabled, of course).
• Keyboard accessibility supported.
• You can call a function after the font is increased or decreased.

See also:

• jQuery Plugin For Altering The Font Size On Sites - jFontSize
• jQuery Plugin For Changing Font Size Of Web Page - Text Resizer
• Flexible jQuery Plugin For Font Size Controller - RV Font Size

Basic Usage:

1. Load the jQuery javascript library and jQuery creasefont plugin in your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.creaseFont.min.js"></script>

2. Create the html for the text size controller.

<a id="fontLarge" href="javascript:void(0);">Increase</a>
<a id="fontDefault" href="javascript:void(0);">Default</a> 
<a id="fontSmall" href="javascript:void(0);">Decrease</a>

3. Initialize the plugin and custom the key code in the javacript.

<script type="text/javascript">
jQuery(document).ready(function(){
$.creaseFont();
});

$(window).keydown(function(e) {
switch (e.keyCode) {
case 107: // add key
$('#fontLarge').click();
return false;
case 111: // divide key
$('#fontDefault').click();
return false;
case 109: // subtract key
$('#fontSmall').click();
return false;
}
return;
});

</script>

4. Available options.

<script type="text/javascript">
jQuery(document).ready(function(){
$.creaseFont({
content       :   'body', // container of the content which should be in/decrased, body is all / string
defaultSize   :   100, // Stock Fontsize in % / integer or float 
maxSize       :   160, // Maximum Fontsize in % / integer or float 
minSize       :   60, // Minimum Fontsize in % / integer or float 
stepSize      :   10, // steps / integer or float 
unit  :   '%', // stock unit is % / string
bFontLarge    :   '#fontLarge', // ID from the increase button / string
bFontDefault  :   '#fontDefault', // ID from stock button / string
bFontSmall    :   '#fontSmall', // ID from decrease button / string
animate       :   true, // Use Animation? / bool
animateSpeed  :   500, // Animation Speed (milisec)/ int
cookieName    :   'creaseFont', // Name of the Cookie / string
cookiePath    :   '/', // Path of the Cookie, / is the whole domain / string
cookieLifetime:   60 // Cookie lifetime in days integer
});
});
</script>

---

This awesome jQuery plugin is developed by Sentences. For more Advanced Usages, please check the demo page or visit the official website.