jQuery Stylesheet switcher doesn't remember on refresh

[mrmozer]

I am trying to allow the user of my website the choice of 3 themes. The code I have works perfectly except it does not remember the choice of style after clicking any link on my website or refreshing the page! Please help. My code looks like this right now:

in my html head
<link href="CSS/layout_blue.css" rel="stylesheet" type="text/css" />

The list of options available to your visitors
List your available stylesheets here
<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>

This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "CSS/layout_red.css"});
});
// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "CSS/layout_blue.css"});
});
// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "CSS/layout_green.css"});
});
});
</script>

I got this code from:
http://frinity.blogspot.com/2008/06/...ng-jquery.html

Any help would be deeply appreciated!

[Nile]

You'll have to set a cookie, try using the jQuery cookie plugin.

[qeorge]

mrmozer - As Nile said, you'll need to set a cookie to remember the user's preference. Here's how you would do that.

For convenience, add these 2 functions from the w3schools site, getCookie() and setCookie(), to the top of your JS file:

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1; 
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    } 
  }
return "";
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

Then in the jQuery functions that changes stylesheets, save the user's preference like this (the green line was added to your original code):

// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "CSS/layout_blue.css"});
setCookie('csspref', 'blue');
});

(repeat for the other colors)

Finally, check to see if the cookie is set when the page loads, and change to the user's preferred stylesheet if they've chosen one.

Put this code at the end of your $(document).ready() function:

var $cssPref = getCookie('csspref');
if ($cssPref.length > 0)
{
     $('#css-' + $cssPref).trigger('click');
}

That should do it! A better solution would be to check the cookie when rendering the page and simply include the correct stylesheet, instead of changing it via JS when the page loads. In PHP that would look something like this:

<?php
$cssFile = 'red.css'; // default stylesheet
if (isset($_COOKIE['csspref']) && in_array($_COOKIE['csspref'], array('blue', 'green')))
{
     $cssFile = $_COOKIE['csspref'] . '.css';
}
echo '<link rel="stylesheet" media="screen" type="text/css" href="CSS/layout_' . $cssFile . '" />';
?>

Hope that helps!

By the way, the code you're using has a big problem: it would change out the href of every single stylesheet you've got loaded. If you have more than one this is going to be a problem.

You can fix it by giving an id to the stylesheet you want to change out, like this:

<link id="changeableStylesheet" href="CSS/layout_blue.css" rel="stylesheet" type="text/css" />

And then in your functions that change out the stylesheets, change the selector like this:

This:

$("link[rel=stylesheet]").attr({href : "CSS/layout_red.css"});

Becomes:

$("#changeableStylesheet").attr({href : "CSS/layout_red.css"});

[mrmozer]

Nile thank you for suggesting the use of jQuery cookie.
And George, I can't thank you enough! Your code works like a charm =D
I even took your suggestion on the PHP code to write the style sheet.

My site still needs a lot of work...but at least I got the themes all figured out, thanks to you George.

If you guys wanna a sneak peak on what I'm working on, it's
http://www.ProtoQUEST.ca

Thanks again

P.S. If I need anymore help I might bug you guys again =S

[mrmozer]

Since I started putting pages in different directories, the cookie doesn't cover directories other than root.

Any idea how I can get the cookie to support all directories in the site?