Welcome, Registration, and other StartingPoints; Foswiki history & Wiki style; All the docs...
Edit | Attach | New | Raw | Delete | History | Print | Tools
You are here: System » JQueryPlugin » JQueryFluidFont

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

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

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

Examples

This area uses fluid typography.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis neque id ipsum imperdiet at ornare magna auctor. Nunc condimentum enim vitae libero placerat scelerisque. Nunc eu neque orci, in hendrerit tortor. Vestibulum quis arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh est, consectetur quis commodo scelerisque, laoreet ac nulla. Mauris feugiat elit non ante hendrerit ut ultricies nisl aliquam. Pellentesque fermentum tortor a nunc vulputate laoreet. Nulla at odio ut magna bibendum dignissim. Duis eget lorem ut erat blandit accumsan in quis dolor.

head head head head head head head head head head head head head head head head head head head head
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data

Click here to activate fluid font for all of this page.

%STARTSECTION{"fluidfont"}%
<script type="text/javascript">
jQuery(function($) {
  $("body").fluidfont({
    width: 1024, 
    min: 11,
    max: 20
  });
});
</script>
spacer
Changed by micha on 03 Dec 2009 - 07:06 - r1
Copyright © 2014 Atomikos BVBA. Transaction Management for Extreme Transaction Processing and SOA Environments serving ISV, Commercial, OEM and Open Source Markets
Site map RSS ATOM