CODEWITHSUNDEEP
jquerycsscookies
Insight
Insight

Reputation: 222

jquery Cookie and CSS

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>

Upvotes: 1

Views: 698

Answers (3)

Insight
Insight

Reputation: 222

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

Upvotes: 0

Filip
Filip

Reputation: 2522

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

Upvotes: 1

Yes Barry
Yes Barry

Reputation: 9836

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

Upvotes: 0

Related Questions