I making increase font size by buttons but I don't know how to store fonts sizes in session. Each time when I change page fonts size are reset. I trying use sessionStorage but probably I'm doing it wrong.
(function ($) {
var defaultFontSize = $('html').css('font-size');
$(".resetMe").click(function () {
$('html').css('font-size', defaultFontSize);
});
$(".increase").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize * 1.15;
if (newFontSize > 11.5) {
return false;
} else {
setFontSize(newFontSize);
storeFontSize(newFontSize);
return false;
}
return false;
});
$(".decrease").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize * 0.85;
if (newFontSize < 8) {
return false;
} else {
setFontSize(newFontSize);
storeFontSize(newFontSize);
return false;
}
return false;
});
function getFontSize() {
var currentSize = $("html").css("font-size");
var currentSizeNumber = parseFloat(currentSize, 12);
if (currentSizeNumber > 12) {
return false;
}
if (currentSizeNumber < 10) {
return false;
}
return currentSizeNumber;
}
function setFontSize(size) {
$("html").css("font-size", size);
$(".actualSize").html(size);
}
function storeFontSize(size) {
if (sessionStorage) {
sessionStorage.setItem('font-size', size);
console.log(sessionStorage.length) // 1 element
// 1st element
console.log(sessionStorage.key(0)); //
console.log(sessionStorage.length) // 1 - tylko
sessionStorage.getItem('font-size');
$("html").css("font-size", sessionStorage.getItem('font-size'));
$(".actualSize").html( sessionStorage.getItem('font-size'));
}
}
})(jQuery);
I see in console that some value is storage but I can't set this font size in session.
You need to read the sessionStorage when the page loads. This can be done with $(document).ready
(function ($) {
$(document).ready(function () {
var size = sessionStorage.getItem("font-size") || 12;
setFontSize(size);
});
var defaultFontSize = $("html").css("font-size");
$(".resetMe").click(function () {
$("html").css("font-size", defaultFontSize);
storeFontSize(defaultFontSize);
});
$(".increase").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize * 1.15;
if (newFontSize < 20) {
// Not higher then 20
storeFontSize(newFontSize);
}
});
$(".decrease").click(function () {
var fontSize = getFontSize();
var newFontSize = fontSize * 0.85;
if (newFontSize > 8) {
// Not lower then 8
storeFontSize(newFontSize);
}
});
function getFontSize() {
var currentSize = $("html").css("font-size");
return parseFloat(currentSize, currentSize);
}
function setFontSize(size) {
$("html").css("font-size", size + "px");
$(".actualSize").html(size);
}
function storeFontSize(size) {
console.log(size);
sessionStorage.setItem("font-size", size);
setFontSize(size);
}
})(jQuery);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments