Solved

Bread crumb path on homepage

Posted on 2003-11-26
10
533 Views
Last Modified: 2008-02-01
There is a bread crumb path on my company's intranet homepage.   I'm using ASP & HTML to build this homepage.  

eg.  You are here:  Home / HR / Announcements / Benefits / current page

How do I make each section a clickable link to it's respective folder?  The path should show what page the user is on in relation to the homepage and the links followed to get there.

eg.  Clicking on Home takes you to homepage
       Clicking on HR takes you to the HR folder
       Clicking on Announcements takes you to the Announcements folder
       ....etc

Please provide ASP code.

0
Comment
Question by:jckwoo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 4

Accepted Solution

by:
Iguanasan earned 125 total points
ID: 9824833
<%
DIM sTemp, aTemp, sBreadCrumbs, sNewPath
sTemp = Request.ServerVariables("PATH_INFO")
aTemp = Split(sTemp,"/")
for i = 0 to UBound(aTemp)
      sNewPath = sNewPath & aTemp(i) & "/"
      sBreadCrumbs = sBreadCrumbs & "<a href=" & sNewPath & ">"
      if Len(aTemp(i)) = 0 then
            sBreadCrumbs = sBreadCrumbs & "Home"
      else
            sBreadCrumbs = sBreadCrumbs & aTemp(i)
      end if
      sBreadCrumbs = sBreadCrumbs & "</a> | "
next
sBreadCrumbs = Left(sBreadCrumbs,Len(sBreadCrumbs)-3) ' Drop last separator
Response.Write sBreadCrumbs
%>
0
 

Author Comment

by:jckwoo
ID: 9825051
Hi there,
It's displaying the name of the asp file where I saved your code.

eg.  Home | test.asp
0
 
LVL 4

Expert Comment

by:Iguanasan
ID: 9825197
If you don't want that then change

for i = 0 to UBound(aTemp)

to

for i = 0 to UBound(aTemp) - 1
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9825750
What about using this Javascript breadcrumbs

<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--

function breadCrumbs(delimiterStr) {
loc2 = window.location.toString();
loc = loc2.toLowerCase();
subs = loc.substr(7).split("/"); // Assume the first 7 characters are http://
//Added class="breadCrumbs" so that a style sheet can be used
      document.write("<a class=\"breadCrumbs\" href=\"" + getLoc(subs.length - 1) + "\">Home</a> " +
    delimiterStr + " ");
    a = (loc.indexOf('index.') == -1) ? 1 : 2;
    if (subs[subs.length-1].length == 0) {
    a++;
}
for (i = 1; i < (subs.length - a); i++) {
    subs[i] = makeCaps(unescape(subs[i]));
//Added class="breadCrumbs" so that a style sheet can be used
    document.write("<a class=\"breadCrumbs\" href=\"" + getLoc(subs.length - i - 2) + "\">" +
    subs[i] + "</a> " + delimiterStr + " ");
}
document.write(document.title);
}
function makeCaps(a) {
    g = a.split("_");
    for (l = 0; l < g.length; l++) {
    g[l] = g[l].toUpperCase().slice(0, 1) + g[l].slice(1);
}
return g.join(" ");
}
function getLoc(c) {
    var d = "";
    if (c > 0) {
    for (k = 0; k < c; k++) {
    d = d + "../";
    }
}
return d;
}
//-->
</script>
</head>

<body>
<!--
      Use this if you want to use an arrow image
<script type="text/javascript">breadCrumbs("<img src='ArrowRight.gif'>");</script>

-->
<br />
<script type="text/javascript">breadCrumbs(">");</script>

</body>
</html>
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 9826167
I believe Iguanasan's code assumes that each breadcrumb is a path back to the root directory. This is not always the case. You may be on "Home / HR / Announcements / Benefits /", but you could still only be in the folder "Home / HR". Best practice for breadcrumbs: what is the optimum path you want your users to travel to access this information? Then display those breadcrumbs. This often requires manually programming the breadcrumbs.
0
 
LVL 4

Expert Comment

by:Iguanasan
ID: 9826185
bjrcreations makes a good point.  As for my code: I just gave him what he asked for.
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 9826199
Iguanasan, you are right - your code works great given his requirements.
0
 

Author Comment

by:jckwoo
ID: 9826284
Bjrcreations & Iguanasan,

Is there a way to make this work?    I should clarify that there is drop navigation bar on top of the page.   Each time you go to a folder & subfolders, the breadcrumb path changes.  
0
 
LVL 4

Expert Comment

by:Iguanasan
ID: 9826329
It does work.  I'm not sure I understand the question.
0
 
LVL 3

Expert Comment

by:bjrcreations
ID: 9826371
jckwoo,

Isn't that what you want? When you go to a folder or subfolder, it changes the path to include that folder or subfolder - right? So if you were on "Home / HR" and you click on the Announcements link (taking you to the announcements folder), you are now in "Home / HR / Announcements". If this is the case, Iguanasan's code should work.

bjrcreations
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question