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 on css/fvfs.css file.

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: `template: '<div class="btn-group">' + '<a href="#" class="rvfs-decrease btn">A-</a>' + '<a href="#" class="rvfs-reset btn">A</a>' + '<a href="#" class="rvfs-increase btn">A+</a>' + '</div>'` Note: to use this option please do NOT forget to add these three key css classes: `rvfs-increase`, `rvfs-decrease` and `rvfs-reset`. Because the plugin will try to find them to attach their respective event handlers.

Credits

License

MIT License

ramonvictor/rv-jquery-fontsize

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

Packages