Introduction
This a slightly updated older page of my website. The original pages had breadcrumb clickable navigation but as the site expanded it turned out that it had a wider structure than deep and they were not so useful as they could be. To give an example, the breadcrumb navigation on this page was simply
Home > Utilities > Breadcrumbs
Breadcrumb naviagation can be very useful to help visitors navaigate around a site and I would have kept them if the site had a deeper structure such as:
Home > Utilities > Coding > JavaScript > Scripts > Breadcrumbs
The Code
When I first started the site I came up with an idea that I thought was good but turned out to be stupid. What I did was insted of having an index.htm page in the folders I thought I'd use the first letter of the section then add "ind" to it. So, the Bristol section index page became "bind.htm", the one for the computer section became "cind.htm", the one for the Web section became "wind.htm" and so on. As I said, a silly idea.
The code I came up with was:
function breadcrumbs(){
var path = location.pathname;
var dir = new String;
dirhref = new String;
home = '<a href="../index.html">Home</a>';
path = path.replace(/\\/g, "/");
var bits = path.split("/");
dir=bits[bits.length-2];
dirhref = dir.slice(0,1);
switch(dir){
case "optill" :
dir = "Optical Illusions";
break;
case "bristol" :
dir = "Bristol";
break;
case "dad" :
dir = "Dad's Navy Days";
break;
case "th" :
dir = "Terre Haute";
break;
case "qbasic" :
dir = "QBasic";
break;
case "wstory" :
dir = "War Stories";
break;
case "nabris" :
dir = "Bristol's Worldwide";
break;
case "comp" :
dir = "Computers";
break;
case "misc" :
dir = "Miscellany";
break;
case "utils" :
dir = "Utilities";
break;
case "ray" :
dir = "Ray";
break;
}
dirhref = '<a href="' + dirhref + 'ind.htm">' + dir + '</a>';
if (dir=bits[bits.length-1].search("tpcards") > -1){
dirhref = dirhref + ' > <a href="tpcards1.htm">Postcards</a>'
}
document.write(home + " > " + dirhref + " > " + document.title);
}
Dissection
location.pathname is used to obtain the path from the root and the current document name. In this case, /utils/ubcrumbs.htm is returned - the original name of this page was ubcrumbs.htm.
home = '<a href="../index.html">Home</a>'; sets up the home part of the breadcrumbs. The title page for this site is called index.html on all the servers that carry it and when it is written to CD or on a hard drive.
path = path.replace(/\\/g, "/"); is for when the site is on a CD or hard drive. What this code does is replace all the instances of "\" in the path name and changes them to a "/". This is the regular expression form of replace that is capable of changing all the looked for characters in a string.
var bits = path.split("/"); splits the variable "path" at the "/" character and puts them in an array I've named bits.
dir=bits[bits.length-2]; sets the variable "dir" to the the second from last element in the array. The last element in the array is the document file name. The site is only one directory level deep so I'm not worried about the rest of the elements, but if needed they can be easily extracted.
dirhref = dir.slice(0,1); takes the first letter of the directory and puts it in the variable "dirhref". How my site is organised is that each folder begins with a different letter, and the first or home file of the folders is the intitial letter of the folder followed by "ind.htm". For example, this page is in the folder "utils" and the first or home page of that folder is uind.htm. In order to make the link to the first file in each section I need to extract that first letter.
The switch construct is to make some sort of readable form from the directory names. So the folder "dad" contains the files of my fathers' time in the Royal Navy. Hence, the variable "dir" which originally contained "dad" is reassigned to "Dad's Navy Days". Incidentally, the first file in "dad" is dind.htm.
dirhref = '<a href="' + dirhref + 'ind.htm">' + dir + '</a>'; makes the HTML code for the links. This file is in the "utils" folder and the first file in that folder in uind.htm , dirhref originally contains "u", dir originally contained "utils" which was changed to "Utilities" in the switch construct. After this line of code is executed dirhref contains <a href="uind.htm">Utilities</a>
if (dir=bits[bits.length-1].search("tpcards") > -1){
dirhref = dirhref + ' > <a href="tpcards1.htm">Postcards</a>'
}
This is a special case for the Terre Haute postcards section. This hasn't a separate subdirectory but is contined in the Terre Haute directory. What happens here is that the filename is checked for the substring "tpcards" if it contains it then <a href="tpcards1.htm">Postcards</a> is added to the dirhref variable.
document.write(home + " > " + dirhref + " > " + document.title); writes the breadcrumbs to the page. Rather than use the file name, in this case "ubcrumbs.htm", which is pretty meaningless to most people, I used the page title from the HEAD section of the file which is "Breadcrumbs". This is extracted by document.title
Calling the function
The JavaScript function can be called by using any of the standard techniques. Because the code is used on most pages on the site I put the function in the main JS file for the site, brisray.js
The pages have to be told where this file is. This is done by putting <script type="text/javascript" src="../common/brisray.js" language="javascript"></script> in the HEAD section of each page.
Where the breadcrumbs are to appear in the BODY of the page the following code is used...
<script language="JavaScript" type="text/javascript">
<!--
breadcrumbs();
-->
</script>
Sources and Resources
This is an update from an older page of mine, these are the original pages I used to help code and create the breadcrumbs.
Breadcrumb Navigation: Further Investigation of Usage - Wichita State University (Internet Archive)
Breadcrumbs in Javascript - Justin Whitford (stormy) on Evolt (Internet Archive)
JavaScript OBJECT: Document - DevGuru (Internet Archive)
Parsing The Querystring with Javascript - Peter Bromberg on NullSkull (Internet Archive)
Using Regular Expressions with JavaScript - Regular Expressions