Bread crumb script

07-18-2002, 12:46 PM

This is one of the more impressive JavaScripts that have come my way, so I thought I'd post it. I have to mention that it was submitted by a visitor which in turn did not write it (original author according to credits is Kevin Lynn Brown).

Basically, this script displays on any page a "trail" (aka bread crumb) of where the viewer is currently at in relationship to the rest of the site. It does so by examining the directories that prefix the page, and displaying this containership (using links).

A bug was found and fixed by myself. The bug basically caused the script to mess up if there are any duplicate directory names in the URL.

To use this script, just add it to your page:

<SCRIPT LANGUAGE="JavaScript">

</script>

You can view a demo of this here: http://javascriptkit.com/script/script2/breadcrumb.shtml

I'm sure people will be coming up with regular expression versions of the above, perhaps with more features.

tommysphone

07-19-2002, 12:48 PM

Any way of influencing the style of the bread crumb text?

I have used a style tag but it has no effect.

head8k

07-19-2002, 03:43 PM

I don't see any reason why style can't be added. Change the following 2 lines in the script so they include the CLASS attribute as below:

path+="<A CLASS=\"myStyle\" HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";

path+="<A CLASS=\"myStyle\" HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";

You will then need to add something along these lines (usually inside the <head> tags) to change the appearance:

<STYLE>

</STYLE>

totalhosting

08-05-2002, 06:53 PM

If I didn't want to show the Root domain as the first link, but rather something like "HOME" with a link back to the root page, how would I alter the script? :confused:

I changed it to this, as the page you are on doesn't need a hyperlink, since you are on it, and I have the page name hard coded on the page below the breadcrumbs:

var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-2);i++) {
path+="<A class=\"crumb\" HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A>
<span class=\"crumb\">></\"span> ";
}
i=s.length-2;
path+="<A class=\"crumb\" HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>
<span class=\"crumb\">></\"span> ";
var url = path;
document.writeln(url);

Thanks.

Pete