JQueryFluidFont

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 1.0

Recompute the font size of an element based on its width.

Usage

JavaScript API

The fluidfont() plugin attaches to a jQuery object and recomputes its font-size based on its width. You can specify a width at which the original font size should be used. When the element is resized the ratio between width and font-size is maintained continuously.

Parameters:

• width: standard width that will show the original font-size
• min: minimal font size in px
• max: maximal font size in px

Foswiki integration

FluidFont is activated for any html element that has got the jqFluidFont class. Options can be specified using JQueryMetadata.

Examples

Fluid font is activated. Try to resize the browser window.

%STARTSECTION{"fluidfont"}%
<script type="text/javascript">
jQuery(function($) {
  alert("Switching on fluid font for the body element. \n Resize the browser window to see the effect.");
  $("body").fluidfont({
    width: 1024, 
    min: 11,
    max: 20
  });
});
</script>
%ENDSECTION{"fluidfont"}%