Entry
How can I show a navigational path, with a link for the host and each directory of the path?
Mar 12th, 2001 09:34
Martin Honnen,
Here is code for NN3, NN4, NN6, IE4+ and Opera 5 that breaks up
location.pathname
into components and creates a link to each component. Note that this
code is intended for use in a web page loaded from a web server only and
does not work reliably when used with local pages (loaded via file: url)
due to the many different ways browsers handle local file paths.
<HTML>
<HEAD>
<TITLE>
navigation path
</TITLE>
<STYLE>
.orange {
color: white;
background-color: orange;
}
.white {
color: orange;
background-color: white;
}
.lightblue {
color: lightblue;
text-decoration: none;
}
.black {
color: black;
}
</STYLE>
<SCRIPT>
function Array_shift () {
var el0 = this[0];
for (var i = 0; i < this.length - 1; i++)
this[i] = this[i + 1];
this.length = this.length - 1;
return el0;
}
function Array_shift_ (array) {
var el0 = array[0];
for (var i = 0; i < array.length - 1; i++)
array[i] = array[i + 1];
array.length = array.length - 1;
return el0;
}
if (window.Array && Array.prototype && !Array.prototype.shift)
Array.prototype.shift = Array_shift;
function navigationPath (separator, pathStyleClass, separatorStyleClass)
{
if (typeof separator == 'undefined')
separator = '/';
if (typeof pathStyleClass != 'undefined' && typeof separatorStyleClass
== 'undefined')
separatorStyleClass = pathStyleClass;
var path = location.pathname;
var components = path.split('/');
// NN returns an empty 0 element so remove that
if (components[0] == '') {
if (components.shift)
components.shift();
else
Array_shift_(components)
}
for (var i = components.length; i > 0; i--)
components[i] = components[i - 1];
components[0] = location.protocol + '//' + location.hostname;
var html = '';
for (var i = 0; i < components.length; i++) {
var text = components[i];
var link = '';
for (var j = 0; j < i; j++)
link += components[j] + '/';
link += components[i] + (i < components.length - 1 ? '/' : '');
if (i == components.length - 1) {
link += location.search;
link += location.hash;
}
html += '<A HREF="' + link + '"';
if (pathStyleClass)
html += ' CLASS="' + pathStyleClass + '"';
html += '>';
html += text;
html += '<\/A>';
if (i < components.length - 1) {
if (separatorStyleClass)
html += '<SPAN CLASS="' + separatorStyleClass + '">'
+ separator
+ '<\/SPAN>';
else
html += separator;
}
}
document.write(html)
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
navigationPath();
</SCRIPT>
<BR>
<SCRIPT>
navigationPath('/', 'orange', 'white');
</SCRIPT>
<BR>
<SCRIPT>
navigationPath(' : ', 'lightblue', 'black');
</SCRIPT>
</BODY>
</HTML>
