breadcrumb trail - location.onchange event needed?

[Safacto]

Hi all,

I'm trying to create a javascript breadcrumb trail. Currently, I read the document.location URL and split it on the "/" character, clean it up a bit and output it as a breadcrumb. Nothing hard about that.

Now I want to extend it to include any anchors in the url. ie. if the URL is "index.htm#section2" I want to display the "section2" as a further breadcrumb. I have managed to do this by splitting the last crumb on the "#" character and looking up this as an element id and taking the innerHTML value for the final breadcrumb.

The problem I have, is that if a link is clicked that skips to an anchor somewhere else on the same page, the breadcrumb does not update. This is because the breadcrumb script is located on a "window.onload" function. Adding a window.reload() to every such link will fix the problem, but this is crude. Therefore, is there an equivalent to a "document.location.onchange" event that I can use to trigger the script? Or is there some other way of doing this?


An example page is at

http://www.civsoc.co.uk/mddp/introduction.htm

The navigation links on the right are all anchor links within the page. Click one and check the breadcrumb, reload the page to prove the point.

The full code is at

http://www.civsoc.co.uk/mddp/javascript/breadcrumb.js

The main code for the breadcrumb is:

var page = document.location.toString();
var crumbs = page.substring(page.indexOf("/")+1,page.length);
crumbs = crumbs.split("/");

var temp = '';
for(var i=0; i<crumbs.length; i++){

  //read page title and replace last crumb

  if(crumbs[i].lastIndexOf('.htm')!=-1){
    var pageanchor = '';
    if(crumbs[i].indexOf('#')!=-1){
    //this only works on a reload (internal links don't reload page)

      anchortext = crumbs[i].substring(crumbs[i].lastIndexOf('#')+1,crumbs[i].length);
      if(anchortext!="pagetop" && anchortext!="menutop" && anchortext!="contenttop" && anchortext!=""){
        anchortext = document.getElementById(anchortext).innerHTML;  //lookup heading text
        pageanchor = ' > '+anchortext;
      }
    }

    crumbs[i] = document.getElementById('pageheading').innerHTML;  //read page name from h2 heading
    crumbs[i] += pageanchor;  //add page anchor;
  }

  text += ' > '+crumbs[i];
}

 

[theboyhope]

Why not just trigger your breadcrumb function when a link is clicked?

 

[Safacto]

Supurb!

I knew I was missing something simple. Cheers.