RV Font Size jQuery Plugin
About
An easy and flexible jquery plugin to give font size accessibility control. See live demo.
Notes:
- The plugin is in beta version, so if you find any bug feel free to report here;
- The project is been tested with jquery 1.9.1.
Features
- Create your own controllers html template (increase, decrease and default buttons);
- Font size settings can be remembered even after page reloads (via localStorage);
- Create your own font size style for each variation by editing the
.fvfs-*classes oncss/fvfs.cssfile.
How to use?
First, import the rv fontsize js file:
<script type="text/javascript" src="js/store.min.js"></script><!-- store plugin required if "store : true"! --> <script type="text/javascript" src="js/rv-jquery-fontsize.min.js"></script>After that, call $.rvFontsize() with the desired options:
// plugin call used in live demo page $.rvFontsize({ targetSection: '#content .post', store: true, // store.min.js required! controllers: { appendTo: '#rvfs-controllers', showResetButton: true } }); Insert the css file [*]
<link rel="stylesheet" href="css/rvfs.css" />[*] Instead of add a new css file, it would be recommended copy its content and paste it on your main css (main.css, style.css or whatever it's called).
CSS observation:
Within rvfs.css file you will find the following snippet of code. This is mandatory because the RV Font Size plugin doesn't add dynamic css style in order to avoid damaging the project performance. Feel free to adapt it to fit your project needs.
.rvfs-1 p, .rvfs-1 li{ font-size: 70% } .rvfs-2 p, .rvfs-2 li{ font-size: 80% } .rvfs-3 p, .rvfs-3 li{ font-size: 90% } .rvfs-4 p, .rvfs-4 li{ font-size: 100% } /* initial font size for 'variations' default value: 7 */ .rvfs-5 p, .rvfs-5 li{ font-size: 110% } .rvfs-6 p, .rvfs-6 li{ font-size: 120% } .rvfs-7 p, .rvfs-7 li{ font-size: 130% }Available options
| Key | Default value | Description |
|---|---|---|
| targetSection | 'body' | Define in which application section the font size changes have to be reflected. |
| store | false | If set as true the browser localStorage will be used to store font size settings. Thus, even if the user refreshs the page the font size will keep the same.When this feature is enabled it uses store.js plugin. So, don't forget to add the store.min.js script tag right before the rv-jquery-fontsize.js. |
| variations | 7 | The amount of variations the font size will change. If it's changed to 9, then the default font size css class will be .rvfs-5. It will increase up to .rvfs-9 class and decrease until it reaches .rvfs-1.Note: every time this option is changed the .rvfs-* classes have to be updated accordingly. |
| controllers | { Â Â append: true, Â Â appendTo: 'body', Â Â showResetButton: false, Â Â template : '' } | Assign append: false means that your font size button controllers will have to be explicit declared within your project html file. By doing this, all the following options (appendTo, showResetButton and template) are invalidated because the js won't append any html template. In this case, it has to be done manually.If append: true, appendTo option can be used to specify in which element the font size controller html has to be appended.It's also possible to show a "reset" font size button by assigning showResetButton: true. Moreover, your own controllers html structure can be defined by using template option, for example: rvfs-increase, rvfs-decrease and rvfs-reset. Because the plugin will try to find them to attach their respective event handlers. |
