jquery – scaling the font size



Good morning all,

Have some requirement with me with regards to fonts-

Have been working around with the below code to enable the user to increase or decrease
the font size of the file.

Now have been trying it in a few browsers and
in all of the subsequent, it is displaying up with a preliminary font size of
16px.

Chrome 1.0.1, Saf Win 4 Public Beta, Firefox 3.0.8 etc.

In IE 6 and 7, the font size is for all time getting back 1243px.

Please tell me as to why is there such a disparity and is there anyhow I can get around in addition to hard coding the initial 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);
}

Please help me!

Thanks mates.

41 weeks 3 days ago   Tags: