I am in need of a script that can dynamically increase and decrease the font size on a website while retaining the user's chosen setting even after they return to the site. I believe utilizing cookies is the way to achieve this functionality. Despite finding an example script online, I encountered issues when implementing it as clicking on A+ (increaseFont) did not produce any results. The script can be found below:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<div>
<span class="increaseFont">A+</span>
<span class="decreaseFont">A-</span>
<span class="resetFont">Aa</span>
</div>
<script>
var fontResize = {
textresize : function(){
var $cookie_name = "eip-FontSize";
var originalFontSize = $("html").css("font-size");
$.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
// if exists load saved value, otherwise store it
if($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error
} else {
$.cookie($cookie_name, originalFontSize);
}
// reset font size
$(".resetFont").bind("click", function() {
$("html").css("font-size", originalFontSize);
$.cookie($cookie_name, originalFontSize);
});
// function to increase font size
$(".increaseFont").bind("click", function() {
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.05;
if (newFontSize > 11) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
// function to decrease font size
$(".decreaseFont").bind("click", function() {
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.95;
if (newFontSize > 11) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
}
}
$(document).ready(function(){
fontResize.textresize();
})
</script>
*I stumbled upon another working example, however, it lacks the cookie feature which means the values reset to default on page reload: https://jsfiddle.net/pairdocs/yq8Le0gn/4/