I need a script that increases and decreases the fonts but remains the value that the user has set when returning to the site. I believe that this should be done by cookie. I found an example but when I put it into practice nothing happens. When I click on A + (increaseFont) nothing happens. Follow the script below the site: https://erika.codes/jquery/increase-decrease-page-font-size-jquery/
<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);
//$.cookie($cookie_name, originalFontSize, {expires: 7, path: '/' });
}
// reset font size
$(".resetFont").bind("click", function() {
$("html").css("font-size", originalFontSize);
$.cookie($cookie_name, originalFontSize);
//$.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
});
// 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;
//var newFontSize = currentFontSizeNum + 2;
if (newFontSize, 11) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
//$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
}
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);
//$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
}
return false;
});
}
}
$(document).ready(function(){
fontResize.textresize();
})
</script>
*I found this other example that works but does not have the cookie, when the page is updated, the values return to normal: https://jsfiddle.net/pairdocs/yq8Le0gn/4/