Jquery's font sizer and Internet Explorer

I found out that the following code doesn't work in Internet Explorer:

function setFontSize() {

   // it doesn't work in IE
  
   $('<div id="font-sizer"><<div>').
   html('<strong>Adjust font size:</strong> 
<a href="#" class="increaseFont">Increase</a> 
<span>|</span> <a href="#" class="decreaseFont">Decrease</a> 
<span>|</span> <a href="#" class="resetFont">Reset</a>').
   appendTo('body');
   
   
  var originalFontSize = $('body').css('font-size');
  $(".resetFont").click(function(){
  $('body').animate({fontSize: originalFontSize},600);
  return false;
  });
  $(".increaseFont").click(function(){
   var currentFontSize = $('body').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 1.2;
 $('body').animate({fontSize: newFontSize},600);
 return false;
  });
  $(".decreaseFont").click(function(){
   var currentFontSize = $('body').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 0.8;
 $('body').animate({fontSize: newFontSize},600);
 return false;
  });
  
 }

Internet Explorer shows enormous variations during the resizing. Any ideas?

Leave a Reply

Note: Only a member of this blog may post a comment.