I'm currently working on implementing a font size adjustment feature on my website, but I'm encountering some difficulties. My goal is to have all elements on the website resize accordingly, including headers, buttons, and modal windows.
Below is the code I've been working on, and I've also provided a link to a jsFiddle for reference: http://jsfiddle.net/R3NGU/3/
var originalFontSize = $('.page').css('font-size');
// Reset Font Size
$(".resetFont").click(function () {
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function () {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum * 1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function () {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum * 0.8;
$('html').css('font-size', newFontSize);
return false;
});