The tree used in the navigation of this website was designed by Emil A Eklund for WebFX. The tree, called WebFX Tree is fully implemented in Object Oriented Javascript, and is to my mind a nice piece of work. I especially like it because it allows one to add persistence to the navigation, meaning that when the user changes page, the tree will have remembered the last state of the tree, so in essence it has memory. This is especially useful when the user browses through a lot of files in a particular category without having to navigate all the way up to it each time, as is usually the case.

The XTree was the main reason that I used frames in my former website, however the disadvantage of web crawlers not able to read frames properly proved too great a handicap. Hence I started looking into the problem a little deeper. But first, what was the problem exactly?

The way that XTree retains persistence is through the use of cookies. Most of us know that these are little text files that can be used by individual webpages to store some data, e.g. for storing the items for a shopping trolley. The problem is that cookies are set only for a particular page, i.e. a cookie that was set by web page A can not be accessed by a web page, B, which resides in a different directory. This makes sense for security reasons. By using frames, one frame can hold the navigation tree and therefore always uses the same webpage. However, I found an easy way around this.

The initial line of code that sets a cookie for a particular folder would read..

WebFXCookie.prototype.setCookie = function (key, value)
{
  document.cookie = key + "=" + escape(value);
}

where key is the folder's identity, and value is either a 1 or 0 for open and closed. It was found, after much elaborate scheming that the solution was embarrassingly simple; include the path to the root directory for all webpages, this overrides the cookie setting the path automatically. Somehow by knowing the root directory, the cookie includes all sub-directories in its searchpath.

WebFXCookie.prototype.setCookie = function (key, value)
{
	document.cookie = key + "=" + escape(value) + "; path=/";
}

where / is the root that holds my public_html folder. Simple but effective, deceptively so.

As an aside, it is very easy to read the cookies that a particular page has set. For example, take this page. Play with the navigation tree a bit, opening and closing folders, and then go to the URL of your browser and type..

javascript:alert(document.cookie);

You should see a window listing the cookies' key=value settings. As a matter of fact, you can even set your cookies this way..

javascript:void(document.cookie="authorization=true");

And if, at the same time, you need to check what the cookie was changed to:

javascript:void(document.cookie="authorization=true");javascript:alert(document.cookie);

Also, the Firefox browser neatly displays all its cookies by going to

Tools-->Options-->Cookies-->View Cookies.

Or, from version 2 onwards,

Tools-->Options-->Privacy-->Show Cookies.