Tuesday, March 31, 2009

[jQuery] Increase / Decrease Font Size

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>

No comments: