0

I am trying to create a jQuery cookie to remember the new font size generated by the code below. I am already using jQuery Cookies in my project for another function but can't figure out how to do it.

This is the jQuery I am using to let users choose a font size that works best for them:

  $(document).ready(function(){
  var resize = new Array('p','.resizable');
  resize = resize.join(',');
  //resets the font size when "reset" is clicked
  var resetFont = $(resize).css('font-size');
    $("#reset").click(function(){
      $(resize).css('font-size', resetFont);
   //reset theme color
        $("#trenbiz" ).attr("href", "/js/skin/skin1.css" );
        return false;
    });

  //increases font size when "+" is clicked
  $("#increase").click(function(){
    var originalFontSize = $(resize).css('font-size');
    var originalFontNumber = parseFloat(originalFontSize, 10);
    var newFontSize = originalFontNumber*1.1;
    $(resize).css('font-size', newFontSize);
    return false;
  });

  //decrease font size when "-" is clicked

  $("#decrease").click(function(){
    var originalFontSize = $(resize).css('font-size');
    var originalFontNumber = parseFloat(originalFontSize, 10);
    var newFontSize = originalFontNumber*0.8;
    $(resize).css('font-size', newFontSize);
    return false;
  });

I tried following the jQuery Cookies doc and just filled in the basic example with my own class names: $.cookie('font-size', 'newFontSize'); but it didn't work. Not sure if its not picking up a value or if it isn't applying it.

Any help at all would be incredibly appreciated!

  • 1
    You are storing `newFontSize` text instead of its value...remove single quotes from `newFontSize`... `$.cookie('font-size', newFontSize);` – Niraj Kaushal Apr 16 '19 at 04:53
  • Use localStorage.setItem in your js – Arun Kumar Apr 16 '19 at 06:06
  • @NirajKaushal I tried using your suggestion by removing the quotes but it doesn't seem to be working. I also tried adding a console log to make sure I can read the value of the current font-size: `console.log(newFontSize);` but it didn't work. Instead its throwing an error saying "newFontSize is not defined". I also tried moving the log right into code brackets with no luck. – Chris Levine Apr 16 '19 at 15:08
  • Could you share complete code ?? – Niraj Kaushal Apr 16 '19 at 15:12
  • @NirajKaushal https://jsfiddle.net/xmfLb24n/ Thank you so much for your help! I got the log function working `console.log($(resize).css('font-size'));` but that isn't detecting the new value I also tried `console.log($(resize).css('font-size', newFontSize));` but its throwing the same "not defined error". – Chris Levine Apr 16 '19 at 15:25
  • @ChrisLevine It seems you didn't write code to set and get `cookie` value, read this `https://stackoverflow.com/a/1458728/4650675` – Niraj Kaushal Apr 17 '19 at 05:37
  • @NirajKaushal I can't figure out how to read current font size, I can get it to read on pageload but I cant get it to update to get the fontsize after I either increase or decrease the fontsize – Chris Levine Apr 17 '19 at 19:15

0 Answers0