jquery css styleswitcher set cookie to css

Question

I run a jQuery styleswitcher that change stylesheet on click.I tried some solutions but i cant find a solution for this. I dont understand how to set a cookie to this. Please anybody that can help me with this issue?

Markup:

    <ul class="colors-list">
        <li><a title="Black" id="black" class="black" ></a></li>
        <li><a title="Green" id="green" class="green" ></a></li>
        <li><a title="Blue" id="blue" class="blue" ></a></li>

    </ul>

jQuery

<pre><code>(function ($) {
"use strict";
var mainApp = {

    main_fun: function () {

        /*=====================================
         THEME SWITCHER SCRIPTS 
        ===================================*/

        //THE CALLING OF PANEL ON CLICKING PLUS BUTTON 

        jQuery('#switch-panel').click(function () {
            if (jQuery(this).hasClass('show-panel')) {
                jQuery('.switcher').css({ 'left': '-50px' });
                jQuery('#switch-panel').removeClass('show-panel');
                jQuery('#switch-panel').addClass('hide-panel');
            } else if (jQuery(this).hasClass('hide-panel')) {
                jQuery('.switcher').css({ 'left': 0 });
                jQuery('#switch-panel').removeClass('hide-panel');
                jQuery('#switch-panel').addClass('show-panel');
            }
        });

        $('#black').click(function () {
            $('#mainCSS').attr('href', 'assets/css/style.css');  //THE STYLE SHEETS WITH THEIR PATHS
        });
        $('#blue').click(function () {
            $('#mainCSS').attr('href', 'assets/css/blue.css');  //THE STYLE SHEETS WITH THEIR PATHS
        }); 
        $('#green').click(function () {
            $('#mainCSS').attr('href', 'assets/css/green.css');   //THE STYLE SHEETS WITH THEIR PATHS
        });
        $('#red').click(function () {
            $('#mainCSS').attr('href', 'assets/css/red.css');    //THE STYLE SHEETS WITH THEIR PATHS
        });



    },

    initialization: function () {
        mainApp.main_fun();

    }

}


$(document).ready(function () {
    mainApp.main_fun();
});

}(jQuery));

So it sounds like you want to create a cookie that stores the name of the current/last stylesheet, so a user that returns to your page/site will have the same style last seen? This thread will help create/set a cookie in JS or jQuery http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie — Will, Nov 07 '14 at 00:22

score 1 · Accepted Answer · edited May 23 '17 at 12:20

If you take a look at this thread - How do I create and read a value from cookie?, there's some pre-written JS code for getting and setting a cookie.

In your case, you can set the cookie value in your jQuery .click handlers.

You'll also want some code that runs when the document is ready, checking to see if a cookie exists on the client. If it exists, you set the stylesheet to the value of the cookie.

I've made an example for you based on your own code. You should be able to modify to fit your situation. http://jsfiddle.net/biz79/pdjmc0n3/1/

JS:

Creating/setting cookie with 1 day expiration

    $('#black').click(function () {
      // stylesheet stuff...
      createCookie('cookie','black',1);
    });
    $('#blue').click(function () {
      // stylesheet stuff...
      createCookie('cookie','blue',1);
    }); 
    //...

And if a cookie exists:

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

    function updateResult() {
      var cookieValue = getCookie('cookie');
      if (cookieValue.length) {
        $('#mainCSS').attr('href', 'assets/css/' + cookieValue + '.css');
      }
    }

jquery css styleswitcher set cookie to css

1 Answers1