Question

I have a script that will change font sizes for particular divs. I have added cookie functions to store the values so that the next page will display the text at the new size. I know that the cookies are carrying the value, but how do I make the new page change the font size to the new value?

Here’s my script:

<script type="text/javascript">
    $(document).ready(function(){

        var fSize = $.cookie('fSize');
        if (fSize) {
            $('html').css('font-size', fSize);
            var originalFontSize = fSize;
        } else {

        }

        $(".resetFont").click(function(){
            $('html').css('font-size', originalFontSize);
          $.cookie('fSize', originalFontSize, { path : '/' });

        });

        // Increase Font Size
        $(".increaseFont").click(function(){
            var currentFontSize = $('html').css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum*1.1;
            $('html').css('font-size', newFontSize);
            $.cookie('fSize', newFontSize, { path : '/' });
            return false;
        });

        // Decrease Font Size
        $(".decreaseFont").click(function(){
            var currentFontSize = $('html').css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum/1.1;
            $('html').css('font-size', newFontSize);
            $.cookie('fSize', newFontSize, { path : '/' });
            return false;
        });
    });

</script>

Answer 1

You’re using parseFloat() in your function. That removes the px (or whatever you use to define your font size) and you never add it back.

Try something like

$('html').css('font-size', fSize + 'px');