jquery Cookie and CSS

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>

Did you try to insert your script in each page?

eversor
– eversor

2011-11-16 09:46:02 +00:00
Commented Nov 16, 2011 at 9:46 — eversor
– eversor, Commented Nov 16, 2011 at 9:46

Filip · Accepted Answer · 2011-11-16 12:18:12Z

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');

edited Nov 16, 2011 at 12:18

answered Nov 16, 2011 at 9:46

Filip

2,52217 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yes Barry · Accepted Answer · 2011-11-16 09:58:25Z

Try replacing 'html' with 'body', like so:

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

Maybe you need to add + 'em' to fSize or % or something. Otherwise, I didn't see any immediate flags with your script.. It looked fine to me.

Edit

On an unrelated note, you could combine two of those functions into one since they are almost identical.

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

Insight · Accepted Answer · 2011-11-17 05:27:46Z

Thanks both. Adding "+ 'em'" worked partially. I had to make some adjustments to account for the 1em being the same as 16px (font-size), because I set my body font size by percentage. Once I'd changed that, I could upscale the font and recall it perfectly. Thanks for your help. Here's the final code:

        $(document).ready(function(){
            var originalFontSize = $('html').css('font-size');

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

            $(".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 newFontSizelg = Math.round(currentFontSizeNum*1.1) / 16;
                $('html').css('font-size', newFontSizelg + 'em');
                $.cookie('fSize', newFontSizelg, { path : '/' });
                return false;
            });

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

Collectives™ on Stack Overflow

jquery Cookie and CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related