Increase & Decrease Font Size To Improve Accessibility - fontsize
| File Size: | 5.25 KB |
|---|---|
| Views Total: | 5870 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
fontsize.js is a tiny text resize plugin that allows the visitor to manually increase or decrease the font size of given elements within the document for better text accessibility.
More Features:
- Custom increase/decrease buttons.
- Custom step size.
- Allows to set min/max font sizes.
- Auto ignores 'SVG', 'IMG', 'USE', 'BR', 'VIDEO', 'AUDIO', 'STYLE', 'SCRIPT' elements.
How to use it:
1. Put text increase/decrease buttons on the webpage.
<button class="zoomin">Bigger</button> <button class="zoomout">Smaller</button>
2. Download and load the JavaScript fontsize.js at the end of the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/fontsize.js"></script>
3. Call the function on the target element where you want to adjust the font size of your text.
<article id="example"> Your Text Here </article>
$('#example').FontSize();
4. Determine the min/max font sizes (the number of times to zoom in and out). Defaults to 2.
$('#example').FontSize({
increaseTimes: 5,
reduceTimes: 5
});
5. Set the step size for text resizing. Defaults to 2.
$('#example').FontSize({
step: 3
});
6. Override the default selectors of increase/decrease buttons.
$('#example').FontSize({
increaseBtn: '.zoomin',
reduceBtn: '.zoomout'
});
This awesome jQuery plugin is developed by little-sean. For more Advanced Usages, please check the demo page or visit the official website.











