Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

In Need of some JS expertise

Breadcrumb script gone bad....

3:52 pm on Aug 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hey all,

I've been struggling with this script for several weeks now, and it shouldn't be this hard. I am going live with a new site in two weeks and have to have it worked out by then so I am starting to sweat a bit.

Please help me out if you can....
Here's the scoop:

.js code -->

function spawn(expr,qty,reversed){
var spawnee=[expr];
return reversed? spawnee.reverse() : spawnee();

function mw_crumbs(divider,default_page,root){
if(!divider) {divider=" : "}
var m=location.toString(),h="";
var howmany=spawn("../",m.length,true);
h+=("<a class='breadcrumbs' href="+howmany[i+1]+">"+unescape( m[i]+"</a>"+divider))
h += document.hiddenform.pagetitle.value ;
if(root) {
return h

I then call the .js in every .htm file with:

<script language="JavaScript" type="text/javascript">
document.write(mw_crumbs("","Homepage name here"))

and have a hiddenform like this:
<form name="hiddenform" id="form1" method="post" action="">
<input name="pagetitle" type="hidden" value="Name of page goes here" />

I am using the hidden form so I can keep long page titles and still name each individual page.

My other dilemma is that the new site will be have a url like

I need to parse out the "new-site" from the breadcrumb as well. I think I've turned this into a nightmare. I am FAR from a java programmer, and have just been modifying this script from one I found on the web.

I would be VERY appreciative is someone could lend a hand with this.

5:18 pm on Aug 18, 2003 (gmt 0)

10+ Year Member

What are the errors that you are getting? What exactly are you trying to do with this script?
5:30 pm on Aug 18, 2003 (gmt 0)

10+ Year Member

Hi stuntdbl,

I think I get what you're saying - do you have any use for this script? It's not quite the method you're using, but it will generate a link to each directory above the current page, presuming each directory has a default page.

// these should really be held in an external file
var wwwexchange101com = "Exchange server";
var user3218 = "My directory";
// ##################################
var pieces = location.href.split("/");
var dot = /[\.¦-]/;
// start after 'http://'
for (i=2;i<pieces.length-1;i++) {
document.write("<a href='" + getUrl(pieces,i) + "'>");
document.write(eval(pieces[i].replace(dot,"")) + "</a>");
if (i!= pieces.length-2)
document.write(" : ");
// ##################################
// assembles URL for this directory
function getUrl(urlPieces,current) {
var output = "";
for (j=0;j<=current;j++)
output += urlPieces[j] + "/";
return output;

Hope that helps?

<added>Forgot to say, those first variable should be the pieces of the URL, once you remove characters, like periods, that can't be used in variable names.</added>

6:03 pm on Aug 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I guess I should have explained further.....

I am trying to get the links to read properly.....

Right now they all point to the homepage (not sure how I screwed that up)


when parsed into the breadcrumbs....all the links point to the homepage.

I'm also trying to figure out how to NOT write out the 1st directory in the breadcrumb, but rather start with the 2nd.

I'm gonna try your script garann, and see if I maybe I can get that to work for me.....I'm totally javascript illiterate though...
Could you explain what the first variables should point to?
var wwwexchange101com = "Exchange server";
var user3218 = "My directory";

Also wanted to add that I am using an apache server (not sure if that will matter at all) and the biggest problem is that I will be pointing the default page of www.mydomain.com to /httpdocs/new-site/index.htm
rather than /httpdocs/index.htm

All of the links in the site are hardcoded to /new-site/ which was really the only way I could think to do it to be able to test the site with my superiors.

6:30 pm on Aug 18, 2003 (gmt 0)

10+ Year Member

Could you explain what the first variables should point to?
var wwwexchange101com = "Exchange server";
var user3218 = "My directory";

You may not need those? They're just display names for the links. The script takes apart the URL, and looks up a variable for each piece, without periods or dashes. So for your example - www.mydomain.com/1st-directory/2nd-directory/defaultpage.html - you might want something like:

var wwwmydomaincom = "Back to home";
var 1stdirectory = "Name of first directory";
var 2nddirectory = "Name of second directory";

I think your redirection should happen invisibly, since you're using the web location, not the location in your file structure. Maybe an Apache admin can comment?

Also, you can skip the www.mydomain.com part of the URL by making changing this 2 to a 3:

// start after 'http://'
for ([b]i=3[/b];i<pieces.length-1;i++) {
11:26 pm on Aug 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Another take on JS breadcrumbs...


function crumble(divider, base, title, reverse) {
var loc = window.location.href, h = 0, i = 0;
var arr = new Array(), ret = "", n = 0, j = 0;
var arrn = new Array(), idx = 0, prefix = null;
var arrLn = 0, arrnLn = 0;

var spc = /%20/g; // pattern to replace encoded spaces

// setup constants
if (!divider)
divider = " : ";
if (!base)
base = "";
if (!title)
title = "You Are Here!";

// cover all the bases by checking for three
idx = loc.indexOf("///");

// get the protocol
prefix = loc.substring(0, ((idx!= -1)?
(idx + 3) : (loc.indexOf("//") + 2)));

// get the URL
loc = loc.substring(((idx!= -1)?
(idx + 3) : (loc.indexOf("//") + 2)));

// split URL for short names in crumbs
arrn = loc.split("/");
arrnLn = arrn.length;

// crumbleize start
for (j = 0; j < arrnLn; ++j) {
idx = loc.indexOf(("/"), h);
if (idx!= -1) {
arr[j] = prefix + loc.substring(0, idx + 1) + base;
h = idx + 1;
else {
arr[j] = prefix + loc.substring(h) + base;

// walk backwards
if (reverse) {
ret = "<b>" + title + "</b>" + divider;
i = 1;
n = 0;
else { // walk fowards start
i = 0;
n = 1;

// crumbleize finish
arrLn = arr.length;
for (i = i; i < arrLn - n; ++i) {
ret += "<a href=\"" + arr[i].replace(spc, " ") +
"\" title=\"" +
arrn[i].replace(spc, " ") + "\">" +
arrn[i].replace(spc, " ") + "</a>";
if (i!= arrLn - n - 1)
ret += divider;

// walk fowards finish
if (!reverse)
ret += divider + "<b>" + title + "</b>";

// drop crumbs


<div id="crumbs">
<script type="text/javascript" src="crumbs.js"></script>
<script type="text/javascript">
void(crumble("", "", "Crumbs are goodies! Yummy-Yummy!",