Search code examples
javascriptcookiesstylesheet

Cookie issue with remembering different stylesheets

I am creating a website which allows the user to change the colour scheme and the text size. I am using cookies so when they change the page it remembers which colour scheme/text size they have chosen.

The problem is that the website does not correctly "remember" both the colour scheme and the font at the same time.

When just using one or the other it works fine e.g. when selecting the colour scheme it will remember the selected colour scheme on each of the pages.

However when I change colour scheme and attempt to change the size of the font the website stops remembering the chosen colour scheme and goes back to the default colour scheme (but does remember the text size).

I am guessing it's because I am setting two cookies rather than one but I can't get the code to work when trying to set one.

<link class="changeme" rel="stylesheet" type="text/css" href="default.css"      title="Standard" />
<link rel="stylesheet" type="text/css" href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

<!-- Loading Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>
<script>      if($.cookie("css")) {
     $("link.changeme").attr("href",$.cookie("css"));
  }
$(document).ready(function() { 
  $("#nav li a").click(function() { 
     $("link.changeme").attr("href",$(this).attr('rel'));
     $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
 });
</script>
<script>
  if($.cookie("css2")) {
     $("link.changeme").attr("href",$.cookie("css2"));
  }
$(document).ready(function() { 
  $("#resize li a").click(function() { 
     $("link.changeme").attr("href",$(this).attr('rel'));
     $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
 });
</script>

Changing the stylesheet

<div id="colourscheme">
<ul id="nav">
<li><a class="colourtext">Colour Scheme: </a></li>
<li><a class="default" href="#" rel="default.css">Default</a></li>
<li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
</ul>


 <!-- Adjust font size -->
<div id="textadjustment">
<ul id="resize">
<li><a class="textsize">Resize Text: </a></li>
<li><a class="small" href="#" rel="default.css">A</a></li>
<li><a class="medium" href="#" rel="large.css">A</a></li>
<li><a class="large" href="#" rel="largest.css">A</a></li>
</ul>
</div>

I am still learning this so apologies if it is something simple to answer!

Solution

  • Use two stylesheet references.

    The HTML document

    <!doctype html>
<html>
  <head>
    <link class="colorCss" rel="stylesheet" type="text/css" href="defaultColor.css" />
    <link class="fontCss" rel="stylesheet" type="text/css" href="defaultFont.css" />
    <link rel="stylesheet" type="text/css" 
      href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

    <!-- Loading Javascript -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>

    <script type="text/javascript">      

      if($.cookie("css")) {
        $("link.colorCss").attr("href",$.cookie("css"));
      }

      if($.cookie("css2")) {

        $("link.fontCss").attr("href",$.cookie("css2"));
      }

      $(document).ready(function() { 
        $("#nav li a").click(function() { 
         $("link.colorCss").attr("href",$(this).attr('rel'));
         $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
        });

        $("#resize li a").click(function() { 

         $("link.fontCss").attr("href",$(this).attr('rel'));

         $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
        });
     });
    </script>
  </head>
  <body>
    <div id="colourscheme">
      <ul id="nav">
        <li><span class="colourtext">Colour Scheme: </span></li>
        <li><a class="default" href="#" rel="defaultColor.css">Default</a></li>
        <li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
      </ul>
    </div>

    <div id="textadjustment">
      <ul id="resize">
        <li><span class="textsize">Resize Text: </span></li>
        <li><a class="small" href="#" rel="defaultFont.css">Default</a></li>
        <li><a class="medium" href="#" rel="large.css">Large</a></li>
        <li><a class="large" href="#" rel="largest.css">Largest</a></li>
      </ul>
    </div>
  </body>
</html>

    defaultColor.css

    body {
  background-color: #aa0000;
  color: #0000aa;
}

    defaultFont.css

    body {
  font-size: 12px;
}

    alternative.css

    body {
  background-color: #000;
  color: #aaa;
}

    large.css

    body {
  font-size: 14px;
}

    largest.css

    body {
  font-size: 18px;
}