Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Breadcrumbs javascript

Posted on 2007-12-03
7
Medium Priority
?
616 Views
Last Modified: 2008-02-21
I implemented this (shown below) javascript in my page , but it doesn't work how it is supposed to, the problem is this, lets say that user is on index page , and clicks another link, page2, and the navigation shows Index > Page2 , but when user clicks from Page2 to Index via <a href="index.php" the navigation on index shows Index > Page2 > Index , i want to show only Previous, not looping again...


var delim = '|';
var trailLength = 5;
var chunks;
var DAY = 24 * 60 * 60 * 1000;
 
function doCrumbs(){
  if(cookieTest('xxx')){
    crumbList = new CrumbList();
    if(getCookie('trailLinks')){
      var staleLinkCrumbs = getCookie('trailLinks').split(delim);
      var staleTextCrumbs = getCookie('trailText').split(delim);
      var startPos=
        (staleTextCrumbs.length<trailLength ||
        document.location==staleLinkCrumbs[staleLinkCrumbs.length-1])
        ?0:1;
      for(i=startPos;i<staleLinkCrumbs.length;i++){
        crumbList.add(staleLinkCrumbs[i],staleTextCrumbs[i]);
      }
    }
    if(document.location!=crumbList.links[crumbList.links.length-1]){
      crumbList.add(document.location,document.title);
    }
    setCookie('trailLinks',crumbList.links.join(delim),1);
    setCookie('trailText',crumbList.text.join(delim),1);
    crumbList.output();
  }
}
 
 
function CrumbList(){
  this.links=new Array();
  this.text=new Array();
  this.add = crumbListAdd;
  this.output = crumbListShow;
}
  function crumbListAdd(href,text){
    this.links[this.links.length]=href;
    this.text[this.text.length]=text;
  }
  function crumbListShow(){
    for(var i in this.links){
      if(i==this.links.length-1){
        document.write( ((i==0)?"":" > ") + this.text[i] );
      }else{
        document.write(
          ((i==0)?"":" > ")
          +"<a href='" + this.links[i] + "'>"
          + this.text[i] + "</a>"
        );
      }
    }
  }
 
 
function cookieTest(name){
  try{
    setCookie(name,'true',1);
    chunks = document.cookie.split("; ");
    return (getCookie(name)=='true');
  }catch(e){
    return false;
  }
}
 
function getCookie(name) {
  var returnVal = null;
  for (var i in chunks) {
    var chunk = chunks[i].split("=");
    returnVal = (chunk[0] == name)
      ?unescape(chunk[1])
      :returnVal;
  }
  return returnVal;
}
 
function setCookie(name, value, days) {
  if (value != null && value != "" && days > 0){
    var expiry=
      new Date(new Date().getTime() + days * DAY);
    document.cookie=
      name +"="+ escape(value) +"; expires="
      + expiry.toGMTString();
    chunks = document.cookie.split("; ");
  }
}

Open in new window

0
Comment
Question by:suprem3
[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
  • 3
  • 2
7 Comments
 
LVL 31

Expert Comment

by:Frosty555
ID: 20397957
What you are creating is essentially a history of the last few pages visited by the user, it isn't actually a breadcrumb trail. A breadcrumb trail relates pages on your website to other parent pages which have been predefined by you, regardless of the order the user visits them. You'd do that maybe by putting a special html comments header onto all your pages which specify the parent, and server-side code would open each file on the server and walk through the tree of files assembling an array of breadcrumb items.

But perhaps if you want to stick with what you have, you can do this:

In your crumbListAdd() function, instead of just appending the new data to the end of the arrays, first loop through the array searching for an identical item to the one you are adding. If you find it, truncate the array to that value. If you don't find it, append it to the end.
0
 

Author Comment

by:suprem3
ID: 20400252
This apparently is not an good script for my site....

I want to make an navigation like amazon have and a lots of other sites...

like this ... Home Improvement : Power & Hand Tools : Power Tools : Drills on top of the site, so the user will know where he is and to click any of these links to go back... can you help me where to find this ?
0
 
LVL 31

Accepted Solution

by:
Frosty555 earned 200 total points
ID: 20405363
Yes, that' s more like what you want. Breadcrumb trails are great on pages with multiple layers of pages like that.

Okay, the basic idea is you want each page to be assigned a predefined "parent" page, through whatever means you want. This should be defined before hand, probably hard coded by you. Each page you make you conceptually decide which page is it's parent.

Then, starting with the page you are currently on, you step through the parents like a linked list, building up the breadcrumb trail as you go. Once you're done, you output it to the screen in a somewhat attractive way.

My suggestion for you, if you want to do it entirely in javascript, is you store the "Page hierarchy" in a single .js file which you import into all your pages. the hierarchy is stored as a series of "names",  "index to the parent", and "url of thi spage" items, giving you enough informatio nt obuild up the breadcrumb trail. If the index to the parent page is -1, then we assume it doesn't have a parent and we stop.

The function that builds up the breadcrumb array is also responsible for formatting

Here's a starting stub for you to work from:




////////////////// BREADCRUMB.JS BEGINS ////////////////
 
var pages = new Array();
var breadcrumbtrail = new Array();
 
// FORMAT:   "Page Title|index of parent, or -1|url to this page"
 
pages[0] = "Welcome|-1|index.htm";
pages[1] = "Home Improvement|0|homeimprovement.htm";
pages[2] = "Power Tools|1|powertools.htm";
pages[3] = "Drills|2|drills.htm";
 
 
function makeBreadCrumbTrail(startindex) {
    var page;
    page = pages[startindex].split("|");   
 
    while( page[1] > -1 )
    {
        breadcrumbtrail[breadcrumbtrail.length] = "<a href=\"" + page[2] + "\">" + page[0] + "</a>";
 
        page = pages[page[1]].split("|");
    }
}
 
 
////////////////// BREADCRUMB.JS ENDS ////////////////
 
 
 
 
 
 
 
 
////////////////// DRILLS.HTM BEGINS ////////////////
 
<script src="breadcrumb.js"></script>
 
<script>
 
// We pass in the starting page. Also hard coded.
makebreadcrumbtrail(3);
 
// Now loop through breadcrumbtrail[] array, in reverse, and print out the trail
for(var i=breadcrumbtrail.length-1; i>=0; i--) {
 
    // put your printout code here
 
}
 
</script>
 
 
/////////////////////////////////////////////////////

Open in new window

0
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 

Author Comment

by:suprem3
ID: 20407992
I found another one , in php which works great but anyway tnx for trying to help me , maybe i should give the code for other users...
0
 
LVL 31

Expert Comment

by:Frosty555
ID: 20408211
yeah if you found your own php script that did it, better would be to post the code/link you found and request to close question with refund. my code above is an untested stub anyways :P
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20953154
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

730 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