creaseFont Plugin for jQuery

View the Project on GitHub Sentences/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">

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.


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

          content     :  'body',
          defaultSize :  100,
          maxSize     :  160,
          minSize     :  60,
          stepSize    :  10,
          unit        :  '%',
          bFontLarge  :  '#fontLarge',
          bFontDefault:  '#fontDefault',
          bFontSmall  :  '#fontSmall',
          animate     :  true,
          animateSpeed:  500,
          cookieName  :  'creaseFont',
          cookiePath  :  '/',


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.

           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)
obj.currContent The HTML Element that has been altered as given in content.
obj.currTask The current task that has been called. (increaseFont|defaultFont|decreaseFont)
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


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


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
comments powered by Disqus