restoring a saved text size

[tonybabb]

Good morning,

I have a smartphone app that allows the user to change the Font-size displayed and this works correctly. I would like the app to store the new font-size and then restore it the next time the app is opened and I'm having difficulties with this. The changed font-size is stored correctly in local storage and retrieved when the app is reloaded, but I can't get it to change the font-size displayed.

Below is the full code and below that is the part that doesn't seem to be working.


<script type="text/javascript">
$(document).ready(function(){ var originalSize = $('div').css('font-size');
// reset
$(".resetMe").click(function(){ $('div').css('font-size', originalSize);
localStorage.size=originalSize; // Save text size for next load
// remove bold line above the button
document.getElementById("chgtxtButton").setAttribute(
"style", "border: 0px; border-style: solid; border-color:#33B5E5;"); });
// Increase Font Size
$(".increase").click(function(){ var currentSize = $('div').css('font-size');
var currentSize = parseFloat(currentSize)*1.1;
$('div').css('font-size', currentSize);
localStorage.size=currentSize; // Save text size for next load
var size2 = localStorage.size;
alert ("localStorage.size set to " + size2);
// remove bold line above the button
document.getElementById("chgtxtButton").setAttribute(
"style", "border: 0px; border-style: solid; border-color:#33B5E5;");
return false; });
// Decrease Font Size
$(".decrease").click(function(){ var currentSize = $('div').css('font-size');
var currentSize = parseFloat(currentSize)*0.9;
$('div').css('font-size', currentSize);
localStorage.size=currentSize; // Save text size for next load
// remove bold line above the button
document.getElementById("chgtxtButton").setAttribute(
"style", "border: 0px; border-style: solid; border-color:#33B5E5;");
return false; });
// If stored, get previous text size
if (localStorage.size)
{var saveSize = localStorage.size;
alert ("stored size = " + saveSize);
$('div').css('font-size', saveSize);
var setSize = $('div').css('font-size');
alert ("setSize = " + setSize);
}

});
</script>

This is the part that doesn't seem to be working. It correctly displays the alert message with say 20px, but the alert following the change of font size says 14px.


// If stored, get previous text size
if (localStorage.size)
{var saveSize = localStorage.size;
alert ("stored size = " + saveSize); // This correctly shows say 20px
$('div').css('font-size', saveSize);
var setSize = $('div').css('font-size');
alert ("setSize = " + setSize); // This shows 14px
}


Thanks for any advice you can offer.

Tony

[tonybabb]

Never mind - I figured it out. In case it helps anyone else the problem was that I had omitted the units when I reset the font size.

The line
$('div').css('font-size', saveSize);


should have been
$('div').css('font-size', saveSize + 'px');