Style Switcher Part B

This post assumes some intermediate understanding of Javascript, stylesheets, and cookies. It will show you how to use cookies with a style switcher to remember a user's preference and load it with their (many) return visits.

In the previous post, I explained a method for allowing users to switch between different stylesheets on your website. However, after they leave your website, there's no way for your site to remember them or which style they preferred. If they liked the 'yellow' stylesheet, they would have to click it each and every time they visited your website. The best way to avoid this problem is to set a cookie when they choose a style, then read the cookie on their return to display the preferred stylesheet.

You can create your cookie as soon as the user clicks on a style, but you'll end up overwriting the cookie several times if the user clicks multiple styles (to check out the different options). A better method is to remember the last style they view before they leave the page.

window.onunload = function() {
  var title = getActiveStyleSheet();
  createCookie("style",title,365);
}

function getActiveStyleSheet() {
  for(var i=0;(a=document.getElementsByTagName("link")[i]);i++) {
    if(a.getAttribute("rel").indexOf("style")!=-1&&a.getAttribute("title")!='blue'&&!a.disabled) {
      var active = a.getAttribute("title");
    }
  }
  if(!active) {
    var active = 'blue';
  }
  return active;
}

function createCookie(name,value,days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
  document.cookie = name+"="+value+expires+"; path=/";
}

The first part of the function waits for the page to 'unload', or for the user to leave it. It then pulls the title of the active stylesheet from a separate function and gives this to another function called createCookie. The getActiveStyleSheet is a simple loop through the possible sheet options. Since my 'blue' stylesheet is default, and I want it to be always active, the loop only checks the black and yellow sheets to see if they are enabled. If they aren't, the value 'blue' is returned. The last function takes three values to make a cookie in the proper format.

There's two more functions that are needed now - one to read the cookies upon a new user visit and another to set the stylesheet based on the cookie's value.

//Add these two lines to your loadEvents class
  var cookie = readCookie("style");
  setActiveStyleSheet(cookie);

function readCookie(name) {
  var cookieName = name + "=";
  var cookieArray = document.cookie.split(';');
  for(var i=0;i<cookieArray.length;i++) {
    var cookieRow = cookieArray[i];
    while(cookieRow.charAt(0)==' ') {
       cookieRow = cookieRow.substring(1,cookieRow.length);
    }
    if(cookieRow.indexOf(cookieName)==0) {
      return cookieRow.substring(cookieName.length,cookieRow.length);
    }
  }
  return null;
}

The first chunk of the code is simple load - once the html portion is set, the cookie is read and the stylesheet is set. To read the cookie is a bit tricky, as you need to parse through all of the different values to find the value, or title, of the sheet required. Please note - the setActiveStyleSheet is described in the previous post, as well as some other functions needed for this to work properly.

And that's all you need to allow users to set and remember what style they like on your site. Much of this code could be simplified by using a framework, like jQuery or Prototype. However, this technique is still an easy way to impress your visitors and add some cool functionality to your site.