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?