[jQuery] Re: Increase / Decrease Font Size

Set and Get the fontSize from the body not the html.

Ex: var currentSize = $("body").css("font-size");

I change your code and works fine if you use the body instead of html to set and get the size: http://jsbin.com/iwage

On Tue, Mar 31, 2009 at 10:20, Dan Vega <danvega@gmail.com> wrote:

I am using the following code to allow the user to increase / decrease
the font size  of the document. I have tested it in many browsers and
in all of the following it comes back with a starting font size of
16px.

Firefox 3.0.8
Google Chrome 1.0.1
Safari Win 4 Public Beta

In IE 6/7 the font size is always coming back 1243px. Why is there
such a difference and is there anyway to get around this besides hard
coding the starting size?


<script type="text/javascript" language="javascript">
$(document).ready(function(){

       var originalFontSize = getFontSize();

       $(".resetFont").click(function(){
               setFontSize(originalFontSize);
               $("#changeFont").fadeToggle("fast");
               return false;
       });

       $(".increaseFont").click(function(){
               var fontSize = getFontSize();
               var newFontSize = fontSize + 1;
               setFontSize(newFontSize);
               return false;
       });

       $(".decreaseFont").click(function(){
               var fontSize = getFontSize();
               var newFontSize = fontSize - 1;
               setFontSize(newFontSize);
               return false;
       });

});

function getFontSize() {
       var currentSize = $("html").css("font-size");
       var currentSizeNumber = parseFloat(currentSize, 12);
       if(currentSizeNumber > 20) {
               currentSizeNumber = 20;
       }
       return currentSizeNumber;
}
function setFontSize(size) {
       $("html").css("font-size", size);
}
</script>