How to add a cookie for CSS choice

Add javascript code to existing code to write a cookie to remember CSS

[Shannon]

Hi, I got this javascript which dynamically changes the CSS for a page when the link is clicked and I don't know how to make it write a cookie so the users preference is remembered.

Here is the code.

In my head:

<link rel="stylesheet" href="wsd.css" type="text/css" media="screen" title="Normal" />
<link rel="alternate stylesheet" href="wsdlight.css" type="text/css" media="screen" title="CollapseTop" />
<link rel="alternate stylesheet" href="wsdslim.css" type="text/css" media="screen" title="CollapseBothTops" />
<script type="text/javascript">
function f_SelectStyleSheet (sTitle) {
if (document.getElementsByTagName) {
var asLinks = document.getElementsByTagName("link");
for (var i = 0; i < asLinks.length; i++)
asLinks[i].disabled =!(asLinks[i].title==sTitle);
}
}
</script>

- and that's called by these links in the body:

<a href="javascript:f_SelectStyleSheet('Normal');">Regular</a>
<a href="javascript:f_SelectStyleSheet('CollapseTop');">Light</a>
<a href="javascript:f_SelectStyleSheet('CollapseBothTops');">Slim</a>

- Can someone help me make the users choice remembered in a cookie please?

Thanks much!

[BlobFisk]

Hi Shannon,

You need to create two new functions, one for setting a cookie and another for retrieving a cookie. In your f_SelectStyleSheet function you will want to first check for the cookie - if there is one there then read it's value and use it to display the correct stylesheet. If one is not there then f_SelectStyleSheet writes a cookie with the value that the user has selected.

You will then need to automatically check for the cookie (seperate to the function) and display the correct style sheet - if any.

You can go a step further and add a checkbox that asks the user if they want the site to remember their stylesheet setting - this is probably a good option from a usability point of view.

[edited by: BlobFisk at 8:19 am (utc) on July 8, 2004]

[RonPK]

[edit] BlobFisk is way too fast...

[Shannon]

since I don't know javascript... code would be sweet.

I think I can figure out the testing for a cookie part and not sure about the code to add which will load the cookie...

Please help with the code...I realize it's probably not much, but I'm learning! :)

[BlobFisk]

Hi Shannon,

It's probably not the answer you want to hear but you are better off taking the plunge and getting into JavaScript. It would be easy to just post the code, but then it's not really a learning experience.

Start out by searching the web and looking at code that writes and reads cookies. Then create a test page and play around with this yourself.

Then create a page that reads the cookie and writes out some "Hello World" text. When you are at this stage you are very close to doing your style switching. It's just a variation on a theme! Instead of writing "Hello World" you are writing a stylesheet.

Any problems along the way - just ask!