Home : Webmonkey : Code : Breadcrumbs : History Crumbs : Javascript

introduction

There are two main ways of approaching breadcrumbs. The first is the kind left by Hansel and Gretel, which is of the form, 'I went here, then here, then here, then here'. I've labelled this kind of breadcrumb, 'History Breadcrumbs', because they show a browsing history.

The second is of the form, 'I'm at this page, which is part of this section, which is part of this section'. I've called this kind 'Position Breadcrumbs' because they show the visitors current location in the site.

Below is a JavaScript implementation of 'History' Breadcrumbs.

example

The example opens in a new window.

code

Drop the code into a file called crumbs.js. Be sure to include the .js file in each page with:

<script type='text/javascript' src='crumbs.js'></script>

Now, at the spot where the crumbs are to appear, include:

<script type='text/javascript'>
<!--
doCrumbs();
//-->
</script>

The contents of crumbs.js file follows:

/*
Copyright Justin Whitford 2006.
  http://www.whitford.id.au/
Perpetual, non-exclusive license to use this code is granted
on the condition that this notice is left in tact.
*/
var delim = '|';
var trailLength = 5;
var chunks;
var DAY = 24 * 60 * 60 * 1000;

function doCrumbs(){
  if(cookieTest('xxx')){
    crumbList = new CrumbList();
    if(getCookie('trailLinks')){
      var staleLinkCrumbs = getCookie('trailLinks').split(delim);
      var staleTextCrumbs = getCookie('trailText').split(delim);
      var startPos=
        (staleTextCrumbs.length<trailLength ||
        document.location==staleLinkCrumbs[staleLinkCrumbs.length-1])
        ?0:1;
      for(i=startPos;i<staleLinkCrumbs.length;i++){
        crumbList.add(staleLinkCrumbs[i],staleTextCrumbs[i]);
      }
    }
    if(document.location!=crumbList.links[crumbList.links.length-1]){
      crumbList.add(document.location,document.title);
    }
    setCookie('trailLinks',crumbList.links.join(delim),1);
    setCookie('trailText',crumbList.text.join(delim),1);
    crumbList.output();
  }
}


function CrumbList(){
  this.links=new Array();
  this.text=new Array();
  this.add = crumbListAdd;
  this.output = crumbListShow;
}
  function crumbListAdd(href,text){
    this.links[this.links.length]=href;
    this.text[this.text.length]=text;
  }
  function crumbListShow(){
    for(var i in this.links){
      if(i==this.links.length-1){
        document.write( ((i==0)?"":" | ") + this.text[i] );
      }else{
        document.write(
          ((i==0)?"":" | ")
          +"<a href='" + this.links[i] + "'>"
          + this.text[i] + "</a>"
        );
      }
    }
  }


function cookieTest(name){
  try{
    setCookie(name,'true',1);
    chunks = document.cookie.split("; ");
    return (getCookie(name)=='true');
  }catch(e){
    return false;
  }
}

function getCookie(name) {
  var returnVal = null;
  for (var i in chunks) {
    var chunk = chunks[i].split("=");
    returnVal = (chunk[0] == name)
      ?unescape(chunk[1])
      :returnVal;
  }
  return returnVal;
}

function setCookie(name, value, days) {
  if (value != null && value != "" && days > 0){
    var expiry=
      new Date(new Date().getTime() + days * DAY);
    document.cookie=
      name +"="+ escape(value) +"; expires="
      + expiry.toGMTString();
    chunks = document.cookie.split("; ");
  }
}

discussion

This one is pretty involved.

In order to track what pages a vistor has browsed, we need something that hangs around longer than each page. For this we use cookies. The last two functions, 'getCookie' and 'setCookie', obviously manage the cookies.

What we store in the cookies are two seperate lists. One list of URLs that the visitor has browsed and one list of titles of the pages that the visitor has visited. We retrieve the text between the page's title tags with document.title.

When someone browses to the page, the script retrieves the two lists from the cookies and populates arrays with them. The items in the cookies are current as of the last page, so they're a little bit stale. Two new arrays are created. All but the most stale item from each list are copied into the new arrays, then the current page is entered.

This is where my Object Orinted influence presents itself. I created a CrumbList object to make life a bit easier. The CrumbList object contains the two fresh arrays - but, importantly, it also has a method that makes it easy to update both arrays at the same time. The CrumbList object has a handy method which formats the breadcrumb output

Just before outputting the formatted breadcrumb list, the script updates the cookies.