adding cookie for jquery style switch

Question

I have a single button that I want to add functionality to. When you click on the button the style of the site will change into a high-contrast version (i.e. the stylesheet high_contrast.css gets appended to the head). Obviously I'm doing a few things wrong as the code below just switches the style for the current page and when you navigate to another page it switches back to the default style. I probably shouldn't be setting that variable highContrast every time. I'd like to use query cookie plugin (https://github.com/carhartl/jquery-cookie) to accomplish this but don't really understand how to use it in this case.

This is the HTML

<div id="contrast-btn"><a href="#" rel="css/high-contrast.css">high contrast</a></div>

This is the script

$(document).ready(function(){
    var highContrast = false;
    $("#contrast-btn a").click(function () {
        if (!(highContrast)) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            highContrast = true;
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            highContrast = false;
        }
    });
});

Thanks for your help

Beat Richartz · Accepted Answer · 2012-07-09 14:09:01Z

2

You have to get and set the value via the cookie:

$(document).ready(function(){
// DRY wrapper function
function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>'); 
}
// append the style sheet on load if the cookie is set to true
if ($.cookie('high_contrast') == 'true') {
  appendStyleSheet();      
}
$("#contrast-btn a").click(function () {
    if ($.cookie('high_contrast') != 'true') {

        appendStyleSheet();      
        $.cookie('high_contrast', 'true'); // set the cookie to true
    }       
    else {
        // remove the high-contrast style
        $("#hc_stylesheet").remove();
        $.cookie('high_contrast', 'false');
    }
});
});

You can add options like expiration or site-wide validity to the cookie, so if you want the cookie to be valid for a year, add this to the cookie command

$.cookie('high_contrast', 'false', {expires: 365});

If you want it to be valid across your whole domain, which may be most likely the case for your implementation, you can add path '/':

$.cookie('high_contrast', 'false', {path: '/'});

edited Jul 9, 2012 at 14:09

answered Jul 9, 2012 at 13:58

Beat Richartz

9,6521 gold badge35 silver badges51 bronze badges

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

4 Comments

steve Over a year ago

seems to be throwing an error on this line: if (($.cookie('high_contrast') == 'true') {

steve Over a year ago

it's working fine for me there thanks. One question, should I not be setting the cookie to expire when you actually set the cookie i.e. $.cookie('high_contrast','true', {expires:365}); ?

Beat Richartz Over a year ago

Depends on when you want it to expire. The number after expires: is in days, so where you set the cookie (where you call $.cookie with two arguments -> $.cookie('high_contrast', 'true'), you should pass {expires: daysYouWantItToExpireIn} as a third argument. Default for the expiration is the session, that means as long as the user stays on the page.

Gray Ayer Over a year ago

If it's not obvious, if anyone's getting a an error on the line:if ($.cookie('high_contrast') == 'true') { with an error of: "Uncaught TypeError: undefined is not a function you probably haven't included the proper jquery-cookie plugin yet.

Wolfram · Accepted Answer · 2012-07-09 14:12:35Z

1

You could set the highContrast in the global context which would help you to evaluate later on the same page:

var highContrast = false;
$(document).ready(function(){
    // [...]
    highContrast = true;
    // [...]
});

But the value will get lost on every page refresh, so you could – as you intended to – set a cookie using jquery-cookie

$.cookie('highContrast', 'true', { path: '/' });

and read it on page load:

if($.cookie('highContrast') && $.cookie('highContrast') === "true") {};

By setting path = '/', the cookie will be available across the whole domain.

So your code would change to this:

$(document).ready(function(){
    // Append the stylesheet on page load
    if ($.cookie('highContrast') === "true") {
        $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
    }
    // Add the click handler to switch the stylesheet on and off
    $("#contrast-btn a").click(function () {
        if (!($.cookie('highContrast') === "true")) {
            $('head').append('<link rel="stylesheet" href="css/high-contrast.css" type="text/css" id="hc_stylesheet"/>');
            $.cookie('highContrast','true',{path:'/'});
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            $.cookie('highContrast','false',{path:'/'});
        }
    });
});

edited Jul 9, 2012 at 14:12

answered Jul 9, 2012 at 13:57

Wolfram

8,0973 gold badges49 silver badges69 bronze badges

1 Comment

Gray Ayer Over a year ago

this worked out of the box for me within a WordPress environment, whereas the other didn't. Many thanks.

Collectives™ on Stack Overflow

adding cookie for jquery style switch

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related