Cubicle bug

CSS and Javascript have revolutionized web development scene and now websites are better looking, more interactive and highly dynamic... all thanks to these two. Out of their many awesome uses, one of the feature which is used in quite a few websites these days is to give user the ability to change look and feel of website. Many user like to use this facility to change font size, colors and page layouts as per their comfort so this post will show how to attract more such users.
To do this we have to create additional CSS, mark it as alternate stylesheet and write javascript code to switch to this stylesheet when corresponding link is clicked by user on this page. Sound too much to do? Then look at the Demo and read on for step wise procedure for more details.

First step is to create two CSS files, one default and another alternate. In alternate CSS file put those styles which you want to apply when user clicks on the link.

Second step is to include these files on your page and specify which one is preferred and which one is alternate stylesheet. here is how it would look like:

<link href="default_black.css" media="all" rel="stylesheet" title="black" type="text/css"></link>
<link href="white.css" media="all" rel="alternate stylesheet" title="white" type="text/css"></link>

Note the "rel" attribute of link tag, this specifies which one is alternate CSS. In this case "default_black.css" is default(which means first time page will be loaded with this CSS) and "white.css" is alternate. The title attribute is used to identify which CSS needs to be enabled and which one should be disabled.

Third step is to get styleSwitcher.js and styleswitcher-load.js and include it in your page.

<script type="text/javascript" src="styleswitcher.js"></script>
<script type="text/javascript" src="styleswitcher-load.js"></script>

Fourth step is to create links on your page which will call "setActiveStyleSheet" method with title as argument. Javascript code with then fetch the CSS file with title given by you and enable that CSS after disabling all other preferred CSS. Here is how link should look like:

<a href="#" onclick="setActiveStyleSheet('black'); return false;">Black</a>
<a href="#" onclick="setActiveStyleSheet('white'); return false;">White</a>

Please note 'black' & 'white' are values of title attributes in link tags of CSS files.

Thats it, you are ready to go!
I am using this on my personal website to try it out, so you can have another illustration if you want.

More about styleSwitcher.js and styleswitcher-load.js
styleSwitcher.js has functions to get and set required CSS file and while doing that, it also puts a cookie having title of current stylesheet.
styleswitcher-load.js has function which is executed at onload to check which stylesheet should be loaded ont he basis of cookie which was set by styleSwitcher.js. Another function set a cookie whenever page is unloaded so that next time when page is loaded it gets correct CSS title.

Labels: Cookie, CSS, design, HTML, Javascript

What are Cookies?
Cookies are small strings of data of the form name=value. These are delivered to the client via the header variables in an HTTP response. Upon receiving a cookie from a web server, the client application should store that cookie, returning it to the server in subsequent requests. The browser is expected to support 20 cookies for each Web server, 300 cookies total, and may limit cookie size to 4 KB each.
By having the server read information it sent the client previously, the site can provide visitors with a number of conveniences:

1. Identifying a user during an e-commerce session.
2. Avoiding username and password.
3. Customizing a site as per user preferences.
4. Focused advertising.

How to add Cookies to response header?

Cookie userCookie = new Cookie("user", "user_blr_2010");
userCookie.setMaxAge(60*60*24*365); // (Optional)
response.addCookie(userCookie);

How to get Cookies from request?

Cookie[] cookies = request.getCookies();
Cookie cookie;
for(int i=0; i<cookies.length; i++) {
 cookie = cookies[i];
 out.println("<TR>\n" +
 " <TD>" + cookie.getName() + "\n" +
 " <TD>" + cookie.getValue());
}

How to find Cookies with Specified Names?

public static String getCookieValue(Cookie[] cookies,String cookieName,String defaultValue) {
  for(int i=0; i<cookies.length; i++) {
    Cookie cookie = cookies[i];
    if (cookieName.equals(cookie.getName())) {
      return(cookie.getValue());
    }
  }
  return(defaultValue);
}
public static Cookie getCookie(Cookie[] cookies, String cookieName) {
  for(int i=0; i<cookies.length; i++) {
    Cookie cookie = cookies[i];
    if (cookieName.equals(cookie.getName()))
      return(cookie);
    }
    return(null);
}

How to use Java.Net.* API to handle Cookies?

Setup URLConnection to the URL:

URL myUrl = new URL("http://www.testcookies.com");
URLConnection urlConn = myUrl.openConnection();
urlConn.connect();

Header fields comes as Map so find the value which has key="Set-Cookie", and get that field:

String headerName=null;
for (int i=1; (headerName = uc.getHeaderFieldKey(i))!=null; i++) {
  if (headerName.equals("Set-Cookie")) {
    String cookie = urlConn.getHeaderField(i);
  }
}

The string returned by the getHeaderField(int index) method is a series of name=value separated by semi-colons (;), so if we want to find out first cookie:

cookie = cookie.substring(0, cookie.indexOf(";"));
String cookieName = cookie.substring(0, cookie.indexOf("="));
String cookieValue = cookie.substring(cookie.indexOf("=") + 1, cookie.length());

Labels: Cookie, Java, programming