CODEWITHSUNDEEP
jquerycssstylespersistenceswitch-statement
user1063287
user1063287

Reputation: 10869

How to persist dynamically switched stylesheet when navigating site?

I have implemented a solution for switching stylesheets via jQuery:

http://www.paulund.co.uk/switch-stylesheets-with-jquery

The following is the exact code, copied and pasted from the above site:

(function ($j) {

  switch_style = {

    onReady: function () {      
      this.switch_style_click();
    },

    switch_style_click: function(){
    $(".box").click(function(){
        var id = $(this).attr("id");

        $("#switch_style").attr("href", id + ".css");           
    });
    },
  };

  $j().ready(function () {
      switch_style.onReady();
  });

})(jQuery);

The premise is to give the stylesheet reference an id (eg #switch_style) and switch the 'href' attribute on clicking another element.

This works great, but when I navigate between pages, the stylesheet reverts to the original one displayed on page load.

So my question is:

How do I make the dynamically switched stylesheet persist when navigating the site?

PS

As an aside, I've thought about ajaxing the main content area to prevent page reloads, which i'd love to do but haven't found a solution that I could make work yet. I've tried to implement the following solution several times but haven't been able to make it work:

https://github.com/balupton/jquery-ajaxy

Upvotes: 0

Views: 85

Answers (1)

Hailwood
Hailwood

Reputation: 92581

You could store the users stylesheet choice in a cookie, and then on page change if your server has a dynamic language (e.g. PHP) then use that to alter the stylesheet outputted, if not then use jQuery to read the cookie it set and change the stylesheet depending on the cookie value.

Upvotes: 1

Related Questions