Animated & Accessible jQuery Font Size Resizing Plugin - Creasefont
File Size: | 31.1KB |
---|---|
Views Total: | 1407 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Creasefont is a text size control plugin for jQuery that allows the visitor to alter the font size with an animation on the whole website or only in specific html elements.
Additional Features:
- Works with
cookie
to remember the font size settings even after page reloads (if cookies enabled, of course). - Keyboard accessibility supported.
- You can call a function after the font is increased or decreased.
See also:
- jQuery Plugin For Altering The Font Size On Sites - jFontSize
- jQuery Plugin For Changing Font Size Of Web Page - Text Resizer
- Flexible jQuery Plugin For Font Size Controller - RV Font Size
Basic Usage:
1. Load the jQuery javascript library and jQuery creasefont plugin in your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.creaseFont.min.js"></script>
2. Create the html for the text size controller.
<a id="fontLarge" href="javascript:void(0);">Increase</a> <a id="fontDefault" href="javascript:void(0);">Default</a> <a id="fontSmall" href="javascript:void(0);">Decrease</a>
3. Initialize the plugin and custom the key code in the javacript.
<script type="text/javascript"> jQuery(document).ready(function(){ $.creaseFont(); }); $(window).keydown(function(e) { switch (e.keyCode) { case 107: // add key $('#fontLarge').click(); return false; case 111: // divide key $('#fontDefault').click(); return false; case 109: // subtract key $('#fontSmall').click(); return false; } return; }); </script>
4. Available options.
<script type="text/javascript"> jQuery(document).ready(function(){ $.creaseFont({ content : 'body', // container of the content which should be in/decrased, body is all / string defaultSize : 100, // Stock Fontsize in % / integer or float maxSize : 160, // Maximum Fontsize in % / integer or float minSize : 60, // Minimum Fontsize in % / integer or float stepSize : 10, // steps / integer or float unit : '%', // stock unit is % / string bFontLarge : '#fontLarge', // ID from the increase button / string bFontDefault : '#fontDefault', // ID from stock button / string bFontSmall : '#fontSmall', // ID from decrease button / string animate : true, // Use Animation? / bool animateSpeed : 500, // Animation Speed (milisec)/ int cookieName : 'creaseFont', // Name of the Cookie / string cookiePath : '/', // Path of the Cookie, / is the whole domain / string cookieLifetime: 60 // Cookie lifetime in days integer }); }); </script>
This awesome jQuery plugin is developed by Sentences. For more Advanced Usages, please check the demo page or visit the official website.