jQuery.creaseFont

jQuery.creaseFont is a Plugin for jQuery to resize the Font on the whole Page or only in some Elements.

Start using creaseFont with default settings looks like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.creaseFont.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $.creaseFont();
});
</script>

The Buttons somewhere in the HTML body:

<span id="fontLarge" style="cursor:pointer">( + )</span>
<span id="fontDefault" style="cursor:pointer">( &#216; )</span>
<span id="fontSmall" style="cursor:pointer">( - )</span>

You can use every HTML Element with a proper ID.

Options

You can use parameters in the following way, shown are the default settings:

$.creaseFont({
          content     :  'body',
          defaultSize :  100,
          maxSize     :  160,
          minSize     :  60,
          stepSize    :  10,
          unit        :  '%',
          bFontLarge  :  '#fontLarge',
          bFontDefault:  '#fontDefault',
          bFontSmall  :  '#fontSmall',
          animate     :  true,
          animateSpeed:  500,
          cookieName  :  'creaseFont',
          cookiePath  :  '/',
          cookieLifetime:60
          });

Explanation:

Param	Value
content	Can be one or more proper HTML Element. ‘body’ is the whole HTML Document. ‘#id’ proper ID of a Container. ['#id1','id2'] ID’s of more than one Container in a Array. You can use any Selector like ['div.class > ul > li > a']
default_size	Default font size. Default is 100%
maxSize	Maximum font size. Default is 160%
minSize	Minimum font size. Default ist 60%
stepSize	In this step the font size increases or decreases. Defaut is 10%
unit	The unit of the font size. Default is %. Possible is %, em, px, pt (look at the examples)
bFontLarge	Unique ID of the button to increase. Default is #fontLarge
bFontDefault	Unique ID of the button for default size. Default is #fontDefault
bFontSmall	Unique ID of the button to decrease. Default is #fontSmall
animate	Using Animation? Default is true
animateSpeed	Animation Speed Default is 500
cookieName	Name of the Cookie. Default is creaseFont
cookiePath	Path for the Cookie. Default is / for the whole Domain.
cookieLifetime	Lifetime of the Cookie in days. Default is 60

You can use a callback function at least Parameter, which will be called after the font size is increased, decreased or set to default.

$.creaseFont({
           after:function( obj ) {
             $('#callback').html("Zoomlevel: " + obj.currSize + obj.currUnit + "&lt;br /&gt;Current Task: " + obj.currTask + "&lt;br /&gt;" + obj.currLvl);
             }
           });

The object contains the following values.

Object	Value
obj.currSize	The current font size. int or float
obj.currUnit	The current unit (%,em,pt,px) string
obj.currContent	The HTML Element that has been altered as given in content. string
obj.currTask	The current task that has been called. (increaseFont\|defaultFont\|decreaseFont) string
obj.currLvl	The current zoolevel that has been arrived or an empty String max – Maximum zoomlevel arrived default – Default zoomlevel has been clicked min – The minimum zoomlevel has been arrived

Examples

Some examples can be found here: jquery.creaseFont.js Plugin Example 1.

Changelog

1.0.4 - Fixed problem with cookies and array-selectors
1.0.3 - The callback function will now be called, after the animation is done
1.0.2 - animate, animateSpeed added
1.0.1 - First public release