Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts

    Bread crumb script

    This is one of the more impressive JavaScripts that have come my way, so I thought I'd post it. I have to mention that it was submitted by a visitor which in turn did not write it (original author according to credits is Kevin Lynn Brown).

    Basically, this script displays on any page a "trail" (aka bread crumb) of where the viewer is currently at in relationship to the rest of the site. It does so by examining the directories that prefix the page, and displaying this containership (using links).

    A bug was found and fixed by myself. The bug basically caused the script to mess up if there are any duplicate directory names in the URL.

    To use this script, just add it to your page:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    //Author: Kevin Lynn Brown
    //Bug fix: By George of JavaScriptKit.com
    
    var path = "";
    var href = document.location.href;
    var s = href.split("/");
    for (var i=2;i<(s.length-1);i++) {
    path+="<A HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";
    }
    i=s.length-1;
    path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";
    var url = window.location.protocol + "//" + path;
    document.writeln(url);
    //-->
    </script>
    You can view a demo of this here: http://javascriptkit.com/script/scri...eadcrumb.shtml

    I'm sure people will be coming up with regular expression versions of the above, perhaps with more features.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displayed text

    Any way of influencing the style of the bread crumb text?

    I have used a style tag but it has no effect.
    Therapy is expensive, popping bubble wrap is cheap, you choose.

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see any reason why style can't be added. Change the following 2 lines in the script so they include the CLASS attribute as below:

    path+="<A CLASS=\"myStyle\" HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";

    path+="<A CLASS=\"myStyle\" HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> / ";

    You will then need to add something along these lines (usually inside the <head> tags) to change the appearance:

    <STYLE>
    <!--
    a.myStyle { font-family: courier; font-size: 15px; }
    -->
    </STYLE>
    As easy as 3.1415926535897932384626433832795028841

  • #4
    New Coder
    Join Date
    Aug 2002
    Location
    NJ
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I didn't want to show the Root domain as the first link, but rather something like "HOME" with a link back to the root page, how would I alter the script?

    I changed it to this, as the page you are on doesn't need a hyperlink, since you are on it, and I have the page name hard coded on the page below the breadcrumbs:

    Code:
    var path = "";
    var href = document.location.href;
    var s = href.split("/");
    for (var i=2;i<(s.length-2);i++) {
    path+="<A class=\"crumb\" HREF=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+"</A> 
    <span class=\"crumb\">&gt;</\"span> ";
    }
    i=s.length-2;
    path+="<A class=\"crumb\" HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A> 
    <span class=\"crumb\">&gt;</\"span> ";
    var url = path;
    document.writeln(url);
    Thanks.

    Pete
    TotalHosting.com
    Web Hosting | Domain Names | Merchant Accounts | Web Design
    Pete at TotalHosting.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •