Getting elements on page to reset to default size after font increase/decrease
<p>How do I get the elements on my page to reset back to default after font increase/decrease</p>

<p>I've tried the following but with little success (font increase/decrease works):</p>

<p><a href="http://jsfiddle.net/R3NGU/6/" rel="nofollow">jsfiddle</a></p>

<p>Here is my code:</p>

<pre><code>$(".resetFont").click(function () {
});

$(".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 &gt; 24) {
        currentSizeNumber = 24;
    }
    if (currentSizeNumber &lt; 10) {
        currentSizeNumber = 10;
    }
    return currentSizeNumber;
}

function setFontSize(size) {
    $("html").css("font-size", size);
    $(".actualSize").html(size);
}
</code></pre>
