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

Answer 1

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: '/'});