jquery change font-size based on cookie?

Question

I'm trying to create a text resizer, which also sets a cookie depending on what the user has chosen as the font-size for the website. It creates the cookie fine, but I can't seem to get it to resize the body text once the page is loaded initially. Any help would be appreciated.

The code is:

  var origFont = parseFloat($("body").css("font-size"), 10);
  var cookieFont = $.cookie("fontSize");

  if (!cookieFont) {
    var curFont = origFont;
    $("#content").css("font-size", curFont);
  } else {
    var curFont = $.cookie("fontSize"); 
    $("#content").css("font-size", curFont);
  };

I am using the same code to change the font size when you click on increase/decrease, but it's not working for changing the body text once the page is loaded initially.

ADDITION: I just checked this in IE and it works ok, but not in FF, will check the other browsers now...

Ok this works in IE and Opera, but not Firefox, Chrome or Sarafi..

Answer 1

Try defining a unit.

Something like

$("#content").css("font-size", curFont + 'px');

I tested font-size in Firefox 3.6 and it does work without the unit (FF just appends px automatically if there's no unit), while Chrome 9 does not work without a unit.

Answer 2

You are missing the +"px"

See working demo here:

http://jsbin.com/ufetu5/2/edit