Dynamic Breadcrumbs with JavaScript
Note: This script has been updated. You are free, of course, to use any version.
Update 11/6/2007: In updating WordPress I have apparently borked the display of the code. It is in such disrepair that I can’t remember how to put it back together. Given that this is outdated code (and now broken) and given that I have no intention of rewriting it in its original state, I don’t recommend using it.
I wrote this in 2002. I think this was the first time I used JavaScript to solve a real problem. It works well and it’s still in use on a few web sites, including HealthLinks, the site I currently work on at UW. I plan to refactor and publish an updated version soon. For now, feel free to try it out.
// Dynamic Breadcrumbs // Written by Harry Love (http://harrylove.org/) // License: http://creativecommons.org/licenses/by-sa/3.0/ // Created: July, 2002 // Last update: May 3, 2007 // To place breadcrumbs in your page, save this // file (the one you're reading) as a .js file to a directory that makes sense to you. // Link to it in the portion of your web page with: <script src="/path/to/your/file.js" type="text/javascript"></script> // Then in the portion of your page, // wherever you want the breadcrumbs to appear, // paste the following: <script type="text/javascript">createBreadcrumbs();</script> // To style the breadcrumbs I recommend wrapping the above line // in HTML like this: // <p id="breadcrumbs"><script></script></p> // Then use CSS to style it // NOTE: You can reduce the size of this file // by removing all of the comment lines ("//") // BEGIN BASIC CUSTOMIZATION // Starting Point: 1 = domain, 2 = 1st directory, 3 = 2nd directory, etc. // Must be specified as an integer; no floating point numbers. // ***Note***: If the starting number is greater than the number of // directories you have, the URL will be undefined. var startPoint = 1; // idea from Hassan Schroeder // Separator: set the character(s) that will be used to // separate each of the breadcrumb links. // Set the space in between each link by // specifying a number of non-breaking spaces ( ). // The default separator is a "greater than(>)" symbol (>). var sep = " > "; // Starting Name: setting startName to "domain" will // use the full domain name (www.yourdomain.com). // Any other text will be used literally. // E.g., specifying "Home" will use "Home" as the first // link in the chain. // ***Note***: if startPoint is greater than 1, it will start // the chain at a point beyond the domain. startName will // be used for the name of the first link, regardless of where it // starts. var startName = "Home"; // Uppercase or lowercase directory names? If // uppercase is set to yes, the first character // in each of the directory names will be capitalized. // If allUppercase is set to yes, the entire directory // name will be capitalized for each directory. var uppercase = "yes"; var allUppercase = "no"; // You can use the following to replace special characters // in your directory names and page titles var replaceSpecialCharacters = "yes"; var specialCharactersUpper = "yes"; // The text or characters you want to replace go in the first set of quotes // The replacement text or characters go in the second set // E.g., in the first bracket, underscores are replaced by non-breaking space var charactersToReplace = [ [ "_" , " " ], ["text to replace", "replacement text"], // Copy/paste the the line above to add your own // You can also delete the above lines if you wish // If you do copy/paste, copy the brackets and the comma that comes after it [ "leave this alone" , "leave this alone" ] ]; // Endpoint: how do you want the script to handle a // URL that ends in a directory name? E.g., if the URL // is http://www.mydomain.com/start/, do you want the // script to write the name of the directory or the // title of the default document in this directory? // You have 2 choices: directory or title. var endPoint = "title"; // END BASIC CUSTOMIZATION var d=document; var url = d.location.href; var endChar = url.substr(url.length-1); // Replace the "//" in "http://www.mydomain.com" with "/" and store that in the url variable. url=url.replace("//","/"); // Separate the link text from the link var urlText = url; // Split the URL into segments and store them in an array using "/" as a delimiter. var urlLinkArray=url.split('/'); // Get the domain name if we're using that for the home text if(startName=="domain") { var y; startName=""; for(x=0;x<startpoint;x++)> y=x+1; if(y>=1&&y<startpoint)> startName = startName + urlLinkArray[y] + "/"; } else { startName = startName + urlLinkArray[y]; } } }</startpoint)></startpoint;x++)> if(replaceSpecialCharacters == "yes") { for(x=0;x<characterstoreplace.length;x++)> var myRegExp = new RegExp(charactersToReplace[x][0], "g"); urlText = urlText.replace(myRegExp,charactersToReplace[x][1]); } }</characterstoreplace.length;x++)> var urlTextArray=urlText.split('/'); var urlL = urlLinkArray.length; var uppercaseText; var lowercaseText; var lcase; var linkName=new Array(); // According to the variables, change upper- or lowercase directory names. // Also replace special characters if we're doing that if(uppercase=="yes"&&allUppercase=="no") { if(replaceSpecialCharacters=="yes"&&specialCharactersUpper=="yes") { for(x=0;x<characterstoreplace.length;x++)> var myRegExp = new RegExp(charactersToReplace[x][1]+"[a-z]", "g"); for(y=2;y<urll;y++)> </urll;y++)> if(urlTextArray[y].search(myRegExp)!=-1) { var regExpArray = new Array(); regExpArray = urlTextArray[y].match(myRegExp); for(z=0;z<regexparray.length;z++)> if(urlTextArray[y].search(myRegExp)!=-1) { var lastLetter = regExpArray[z].substr(regExpArray[z].length-1,regExpArray.length).toUpperCase(); var newText = charactersToReplace[x][1]+lastLetter; urlTextArray[y] = urlTextArray[y].replace(regExpArray[z],newText); } } } } } }</regexparray.length;z++)></characterstoreplace.length;x++)> for(x=2;x<urll;x++)> </urll;x++)> uppercaseText=urlTextArray[x].substr(0,1).toUpperCase(); lowercaseText=urlTextArray[x].substr(1, urlTextArray[x].length); linkName[x]=uppercaseText+lowercaseText; } } else if(allUppercase=="yes"||uppercase=="yes"&&allUppercase=="yes") { for(x=2;x<urll;x++)> </urll;x++)> linkName[x]=urlTextArray[x].toUpperCase(); } } else { linkName=urlTextArray;lcase="yes"; } // Now create the home URL based on the start point var start=urlLinkArray[0]+"//"; if(startPoint<1){startPoint=1;} for(y=1;y<=startPoint;y++) { start=start+urlLinkArray[y]+"/"; } // This is the function that actually writes breadcrumbs // to the HTML page. function createBreadcrumbs() { if(lcase!="yes") { d.write('<a href="'+start+'">'+startName+'</a>'); } else { startName = startName.toLowerCase(); d.write('<a href="'+start+'">'+startName+'</a>'); } if(urlL>2) { for(x=startPoint+1;x<urll;x++)> </urll;x++)> if(x<urll-1)> </urll-1)> if(x==urlL-2&&linkName[urlL-1]=="") { if(endPoint=="directory") { d.write(sep+linkName[x]); break; } else { if(lcase!="yes") { d.write(sep+d.title); break; } else { var ttl = d.title.toLowerCase(); d.write(sep+ttl); break; } } } else { start=start+urlLinkArray[x]+"/"; d.write(sep+'<a href="'+start+'">'+linkName[x]+'</a>'); } } else { start=start+urlLinkArray[x]; if(endChar=="/") { d.write(sep+linkName[x]); } else { d.write(sep+d.title); } } } } }
1 Comment
-
Harry Love spoke thusly:
Aaaargh! In editing the page the WYSIWYG editor took out the code indents and re-interpreted several code elements as tags. I’ll have to clean this one up again.
