Style Switcher

www.stichpunkt.de

cookies.js

// cookies.js
// www.stichpunkt.de

function setCookie(name, value, expdays) {   // expires in expdays
  var now = new Date();
  var exp = new Date(now.getTime() + (1000*60*60*24*expdays));
  document.cookie = name + "=" + escape(value) + ";" +
                    "expires=" + exp.toGMTString() + ";" +
                    "path=/";
}

function delCookie(name) {   // it has expired
  var now = new Date();
  var exp = new Date(now.getTime() - 1);
  document.cookie = name + "=;" +
                    "expires=" + exp.toGMTString() + ";" + 
                    "path=/";
}

function getCookie(name) {
  var cname = name + "=";
  var dc = document.cookie;
  if (dc.length > 0) {
    var start = dc.indexOf(cname);
    if (start != -1) {
      start += cname.length;
      var stop = dc.indexOf(";", start);
      if (stop == -1) stop = dc.length;
      return unescape(dc.substring(start,stop));
    }
  }
  return null
}

function cssSetCookie(css) {
  setCookie("Layout", css, 365);   // valid 1 year
}

function cssGetCookie() {
  return getCookie("Layout");
}

function cssDelCookie() {
  delCookie("Layout");
}

<head> of HTML file

<head>
...
<script language="javascript" type="text/javascript" src="cookies.js"></script>
<style type="text/css" media="all">@import "standard.css";</style>
<script language="javascript" type="text/javascript">
//<![CDATA[
  if(document.layers)
    document.writeln("<link rel='stylesheet' type='text/css' href='nn4.css' />");
  else if((s = cssGetCookie()) && (s != "standard.css")) {
    document.styleSheets[0].disabled = true;
    document.writeln("<style type='text/css' media='all'>@import '" + s + "';</style>");
  }
//]]>
</script>
...
</head>

Description:

Include the JavaScript file.

<script language="javascript" type="text/javascript" src="cookies.js"></script>

Import standard CSS file. Necessary for people who disabled JavaScript or cookies or use a browser like Opera that can not interpret newer JavaScript. Netscape 4 and IE 3 don't understand @import and ignore it.

<style type="text/css" media="all">@import "standard.css";</style>

Start JavaScript block and include simple CSS for Netscape 4. Other oldies and textbrowser get nothing.

<script language="javascript" type="text/javascript">
  if(document.layers)
    document.writeln("<link rel='stylesheet' type='text/css' href='nn4.css' />");

For the others: read cookie and if it exists and has the defined key and its value is not the standard CSS...

  else if((s = cssGetCookie()) && (s != "standard.css")) {

... disable the first stylesheet. Opera can't change CSS and stops interpreting the script here, he will always get the standard.

    document.styleSheets[0].disabled = true;

... Finally import the stylesheet from the value of the cookie. That's all.

    document.writeln("<style type='text/css' media='all'>@import '" + s + "';</style>");
  }
</script>

If you are coding XHTML you have to tell the XML-Parser to ignore the script:

<script language="javascript" type="text/javascript">
//<![CDATA[
  ...
//]]>
</script>

<body> of HTML file

You can use a form or a link to set or delete the cookie

...
<form action="javascript:cssSetCookie('layout5.css')">
  <input type="submit" value="Use this Layout" />
</form>
...
<a href="javascript:cssDelCookie()">Delete Cookie</a>
...

Feel free to use this code!
But maybe you mail the link so I can have a look....

Thomas Stich
May 2002