My attempt at creating a basic font size changer was working perfectly until I integrated it with the bootstrap framework. Strangely, when I try to increase the font size, it actually decreases instead.
var baseFontSize;
(function () {
"use strict";
/* Global variables */
/* jQuery Plugin: convert fontsize of a DOM element to em
*
* usage: $( element ).pxToEm()
* returns a number rounded to 3 digits
*
*/
$.fn.pxToEM = function () {
var fontSize = this.css("font-size"),
value = /[^em|pt|px]*/g.exec(fontSize);
return Number((value / baseFontSize).toFixed(3));
};
}(jQuery));
$(document).ready(function () {
"use strict";
var body = $("#bodyid"),
increaser = $("#font-sizer > ul > li:first-child"),
decreaser = $("#font-sizer > ul > li:last-child"),
maxFontSize = 2.0,
minFontSize = 0.5;
baseFontSize = parseFloat(body.css("font-size"));
increaser.click(function (event) {
var actualFontSize = body.pxToEM();
actualFontSize += 0.1;
if (actualFontSize > maxFontSize) {
actualFontSize = maxFontSize;
}
body.css("font-size", actualFontSize + "em");
});
decreaser.click(function (event) {
var actualFontSize = body.pxToEM();
actualFontSize -= 0.1;
if (actualFontSize < minFontSize) {
actualFontSize = minFontSize;
}
body.css("font-size", actualFontSize + "em");
});
});
I have included a link to a fiddle showcasing my code.