This is a simple jQuery plugin that allows the user to quickly adjust the font-size of a specified element. Feel free to use it however you see fit.
Include jQuery & the plugin
To start, include a version of jQuery and the plugin.
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.fontResize.js"></script>
The HTML
Next, create an empty div with an id or class.
The Script
Add the following script:
<script>
$(document).ready(function() {
$('#typeResize').fontResize({container : '#content'});
});
</script>
With optional parameters:
<script>
$(document).ready(function() {
$('#typeResize').fontResize({
container : '#content',
effect : 'slide',
speed : 'slow'
});
});
</script>
Parameters
- container [Required]
-
Specify the element to be transformed.
- small [Optional]
-
Set the smallest font-size.
Default: 0.75em
- medium [Optional]
-
Set the standard font-size.
Default: 1em
- large: [Optional]
-
Set the largest font-size.
Default: 1.3em
- effect: [Optional]
-
Set the animation type
Options: slide | fade
Default: none
- speed: [Optional]
-
Set the speed of the effect.
Options: slow | fast
Default: slow
To report bugs or request additional features, contact me.