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');