Switch stylesheets and remember the one selected using jquery.cookie.js

Question

Probably has been already asked before but I still haven't found any useful or complete answer yet.How can we switch stylesheets and save the one that has been selected using jQuery cookie ? So I'm having like 5 stylesheets located in the same folder and the jQuery code below is automatically creating a select element.I can switch between the stylesheets but I don't know how to save the one that has been selected.Thank you.

<link href="styles/black.css" rel="stylesheet" type="text/css" title="black">
<link href="styles/blue.css" rel="stylesheet" type="text/css" title="blue">
<link href="styles/green.css" rel="stylesheet" type="text/css" title="green">
<link href="styles/red.css" rel="stylesheet" type="text/css" title="red">
<link href="styles/yellow.css" rel="stylesheet" type="text/css" title="yellow">

jQuery code:

<script type="text/javascript">
    (function($)
    {
        var $links = $('link[rel*=alternate][title]');
        $('#sw').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
        var options= '<option value="">Select color:</option>';
        $links.each(function(index,value){
        options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
        });
    $links.remove();
    $('#css-selector').append(options)
    .bind('change',function(){
        $('link[rel*=jquery]').remove();
        $('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
    });
    }
    )(jQuery); 
    </script>

Answer 1

Follow these step to create custom layout according to user cookie:-

1. Create a function which read the cookie and change the default.css

   function readCookieCSS(){
       if($.cookie('styleSheet') === null || $.cookie('styleSheet')==undefined) {
           /*Do nothing*/
       }
       else{
           $('link[href="default.css"]').attr('href',$.cookie('styleSheet'));
       }
   }
   

2. Changing the stylesheet and saving the css file name in cookie.

   function saveCSSinCookie(CSS_FILE_NAME){
       if($.cookie('styleSheet') === null || $.cookie('styleSheet')==undefined) {
           $.cookie("styleSheet", CSS_FILE_NAME, { expires : 365 });//expires after 1 year
           $('link[href="default.css"]').attr('href',$.cookie('styleSheet'));
       }
       else{
           $('link[href="'+$.cookie("styleSheet")+'"]').attr('href', CSS_FILE_NAME);
           $.cookie('styleSheet',CSS_FILE_NAME);
       }
   }
   

The basic idea behind these functions is if your cookie exist then stylesheet is saved by the user else the stylesheet is default.css (which in your case can be any one of the above styleSheet).

So, You have to call the readCookieCSS() on page load itself and the second function whenever you need to change the style.

Look into these answer if you want to learn more about stylesheet change and Jquery Cookie:-

1. StyleSheet Change

2. JQuery Cookie

Calling function in your code:-

1. Add the readCookieCSS() when the page is load:-

   $(document).ready(function(){ readCookieCSS();});

2. Add the saveCSSinCookie(CSS_FILE_NAME) is called when you change the stylesheet by updating your current bind function like this:-

   .bind('change',function(){ saveCSSinCookie($(this).val()); });

Updated Javascript as I am storing the different css value and title in javascript array $links Code:-

function readCookieCSS() {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) { /*Do nothing*/
    } else {
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    }
}
function saveCSSinCookie(CSS_FILE_NAME) {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) {
        $.cookie("styleSheet", CSS_FILE_NAME, { expires : 365 });//expires after 1 year
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    } else {
        $('link[href="' + $.cookie("styleSheet") + '"]').attr('href', CSS_FILE_NAME);
        $.cookie('styleSheet', CSS_FILE_NAME);
    }
}
$(document).ready(function()
{
    readCookieCSS();/*reading cookie on page load*/
    var $links = [{'style':'style/black.css','title':'black'}, {'style':'style/blue.css','title':'blue'}, {'style':'style/green.css','title':'green'}, {'style':'style/red.css','title':'red'},{'style':'style/yellow.css','title':'yellow'}];
    $('#sw').append('<div id="toolbar"><select id="css-selector"></select></div>');
    var options= '<option value="style/default.css">Select color:</option>';
    $links.map(function(value,index){
    options +='<option value="'+value.style+'">'+value.title+'</option>';
    });
    $('#css-selector').append(options)
    .bind('change',function(){
     saveCSSinCookie($(this).val());
});
}
); 

Using a default style sheet for the user for first time than changing stylesheet accordingly Updated CSS:

<link href="default.css" rel="stylesheet" type="text/css" title="black">

Working Example