For this tutorial we are going to replicate what is referred to as a 'breadcrumb' trail through the site, this shows the user where they are in teh site in relation to the front page and provides a link to each of the levels in between the top and the current location. The screenshot opposite from a part of the Developer.com site. You can see here that they have listed and provided links for the parent folders of all nodes from the current location back to the top of the site. Here we will look at how we implement a similar system using Client Side Javascript to produce a breadcrumb trail through a site for the users to use, although a similar approach could be - and has been - taken to create the trail using a Server Side Script.
To achieve this we need to know something about every parent folder between the current one and the top of our site, luckily this is provided in the URL, for example the following URL :
http://www.greggriffiths.org/webdev/clientside/javascript/breadcrumbs/
tells us that we are in the breadcrumbs folder, which is within a folder called javascript, which is itself within a folder called clientside, in a folder called webdev within the website www.greggriffiths.org. We can therefore use this information to print out the path to the current page from the top using the following Pseudo Code :
Split the current URL into its constituent folders.
For each constituent folder
Create a link 'object' for each with appropriate text.
Next Folder
Combine all these' objects' together using a seperator to form a single string.
Print out the string.
var constituentFolders = new Array();
var currentURL = document.location.toString();
constituentFolders=currentURL.split("/");
function buildDepth(iterations)
{
var iterations=iterations-3;
var depthStr="";
for (i=0;i<iterations;i++)
{
depthStr=depthStr + "../";
}
return depthStr;
}
var outputStr="";
for (count=2;count<(constituentFolders.length-1);count++)
{
outputStr=outputStr + " : <a href='" + buildDepth((constituentFolders.length-count)+1) + "index.html'>" + constituentFolders[count] + "</a>";
}
document.write(outputStr);
function buildDepth(iterations)
{
var iterations=iterations-3;
var depthStr="";
for (i=0;i<iterations;i++)
{
depthStr=depthStr + "../";
}
return depthStr;
}
function buildBreadCrumbTrail()
{
var constituentFolders = new Array();
var currentURL = document.location.toString();
constituentFolders=currentURL.split("/");
var outputStr="";
for (count=2;count<(constituentFolders.length-1);count++)
{
outputStr=outputStr + " : <a href='" + buildDepth((constituentFolders.length-count)+1) + "index.html'>" + constituentFolders[count] + "</a>";
}
document.write(outputStr);
}
What additional functionality could we provide to this function ? I offer the following suggestions :
- Capitalise the first letter of each Directory name.
- Use an if .. then statement to replace the Directory names with more user friendly ones.
- Use Images rather than text for some or all Directories names.
- Change the colour or font of the Directory name depending on certain conditions.
- Change the start position in the main loop depending on wether you the current page is part of your domain or running on your local PC.
For more information on the breadcrumbs concept in general or how to implement it in a variety of ways, try a search engine such as Google.