Internet Explorer and font resizing with jQuery

Drew Douglass wrote an excellent tutorial on animated font resizing with jQuery. His demo consists of a paragraph and two buttons with ID large and small, respectively. By clicking on the former, an user makes the paragraph text larger, while clicking on the latter makes it smaller. Very smooth. The jQuery code is as follows:

$(function(){
  $('input').click(function(){
   var ourText = $('p');
   var currFontSize = ourText.css('fontSize');
   var finalNum = parseFloat(currFontSize, 10);
   var stringEnding = currFontSize.slice(-2);
   if(this.id == 'large') {
    finalNum *= 1.2;
   }
   else if (this.id == 'small'){
    finalNum /=1.2;
   }
   ourText.animate({fontSize: finalNum + stringEnding},600);
  });
 });

The key aspect here is the parseFloat() function used with a second parameter. By doing so, we avoid some obtuse Internet Explorer's bugs with dynamic font resizing. In fact, IE shows an odd behavior if you use this function without the second parameter: the font resizing is totally out of control, in the sense that you get enormous variations during resizing. In other words, IE is not able to use the parseFloat() function if you don't specify the length of the rounding factor. Instead, it works pretty well in all other browsers. So if you want to provide this kind of feature to your users, bear in mind this little gotcha.

Leave a Reply

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