[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>