Medien
Informatik
Anwendung
1:1-AusstattungenJQueryFluidFont
Homepage: http://foswiki.org/Extensions/JQueryPluginAuthor(s): Michael Daum
Version: 1.10
Recompute the font size of an element based on its width.
Usage
JavaScript API
Thefluidfont() 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 thejqFluidFont 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 |
Fluid font is activated. Try to resize the browser window.
%STARTSECTION{"fluidfont"}%
<script>
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"}%
Kontakt
Pädagogische Hochschule Schwyz
Zaystrasse 42
CH-6410 Goldau
T +41 41 859 05 90
info@phsz.ch
Dies ist ein Wiki des Fachkerns Medien und Informatik der Pädagogischen Hochschule Schwyz. Für Fragen wenden Sie sich bitte an wikiadmin@phsz.ch
Pädagogische Hochschule Schwyz
Zaystrasse 42
CH-6410 Goldau
T +41 41 859 05 90
info@phsz.ch
This page was cached on 31 Jan 2025 - 18:44.
This website is using cookies. More info.
That's Fine