Question

I am currently learning javascript/CSS and so I am trying to implement the Dynamic Javascript Breadcrumbs found at: http://www.webmonkey.com/2010/02/build_dynamic_breadcrumbs_with_javascript/. The code for that is below.

What I am trying to do is modify the links that the breadcrumbs generate; I would like them to be a shade of green and have no text-decoration whenever they are not active or being hovered over. When they are being active or hovered over, I would like them to turn red and become underlined.

The breadcrumbs are being generated correctly, but it seems like the CSS is not being applied correctly. The links are underlined no matter what and are blue to start with, then purple after they are visited. It is weird because if I modify the size, weight, font-family, etc of the links that gets applied, but not the color or text-decoration. I am probably making a beginner’s mistake somewhere, so thanks in advance for your time and help!

My CSS is:

.crumb{
  FONT-WEIGHT: medium;
  FONT-SIZE:medium;
  FONT-STYLE:italic;
  FONT-FAMILY:Arial;
}
.crumb:link, .crumb:visited{
  color: green;
  text-decoration: none;
}
.crumb:hover, .crumb:active: {
  color:red;
  text-decoration: underline;
}

The code for the breadcrumbs is:

var crumbsep = " > ";
var precrumb = "<span class=\"crumb\">";
var postcrumb = "</span>";
var sectionsep = "/";
var rootpath = "/"; // Use "/" for root of domain.
var rootname = "Home";

var ucfirst = 1; // if set to 1, makes "directory" default to "Directory"

var objurl = new Object;
objurl['main-default'] = 'Site Home';

// Grab the page's url and break it up into directory pieces
var pageurl = (new String(document.location));
var protocol = pageurl.substring(0, pageurl.indexOf("//") + 2);
pageurl = pageurl.replace(protocol, ""); // remove protocol from pageurl
var rooturl = pageurl.substring(0, pageurl.indexOf(rootpath) + rootpath.length);
if (rooturl.charAt(rooturl.length - 1) == "/") //remove trailing slash
{
  rooturl = rooturl.substring(0, rooturl.length - 1);
}
pageurl = pageurl.replace(rooturl, ""); // remove rooturl fro pageurl
if (pageurl.charAt(0) == '/') // remove beginning slash
{
  pageurl = pageurl.substring(1, pageurl.length);
}

var page_ar = pageurl.split(sectionsep);
var currenturl = protocol + rooturl;
var allbread = precrumb + "<a href=\"" + currenturl + "\">" + rootname + "</a>" +    
postcrumb; // start with root

for (i=0; i < page_ar.length-1; i++)
{
  var displayname = "";
  currenturl += "/" + page_ar[i];
  if (objurl[page_ar[i]])
  {
    displayname = objurl[page_ar[i]];
  }
  else
  {
    if (ucfirst == 1)
    {
      displayname = page_ar[i].charAt(0).toUpperCase() + page_ar[i].substring(1);
    }
    else
    {
      displayname = page_ar[i];
    }
   }
  allbread += crumbsep + precrumb + "<a href=\"" + currenturl + "\">" + displayname + 
    "</a>" + postcrumb;
}
document.write(allbread);

Answer 1

Probably not a javascript question. Firstly get the markup right, then work in generating it. The HTML result of the document.write is something like:

<span class="crumb"><a href="...">linkText</a></span>

The CSS should be something like:

.crumb a {
  font-weight: medium;
  font-size: medium;
  font-style: italic;
  font-family: arial;
}

.crumb a:link, .crumb a:visited {
  color: green;
  text-decoration: none;
}

.crumb a:hover, .crumb a:active {
  color:red;
  text-decoration: underline;
}

There was an extra colon after .crumb a:active preventing it from applying. Works now.

Incidentally, why are you doing this on the client with document.write when it would likely be far simpler to do it on the server and just send the HTML?