[Javascript] Re: Dynamic breadcrumbs script

Fri Aug 23 09:58:32 CDT 2002

Harry, 

I love this breadcrumbs script. Works great, and the annotation is very 
helpful (you should submit it to the annotated list, ask David for details). 
I modified it slightly to attach the class wrapper directly to the anchor 
tags, this helped in controlling my styles. For the final level link I also 
use the document.title attribute instead of the system parsing out "index", 
although I haven't yet figured a way to remove the folder name behind it if 
it is the index file (seems redundant to link to the page you're on). For 
your company name issue (bottom of the script), could the user define a 
variable in the head of their documents if they wish to use this feature, 
then have the script check to see if the variable exists, and if so 
implement it? 

Cutter 

Harry Love writes: 

> I've had some questions, so FYI,
> I've updated the breadcrumb script to make it (hopefully) more useful to
> others.  I make no claim that this is the best or cleanest way to create
> breadrumbs.  It's simply the way I do it, and I've found it to be very
> portable from site to site.  It also requires little server overhead
> because it runs completely client-side.  The other upside is that you
> never have to change breadcrumb links manually again. 
> 
> Here's the file: http://healthlinks.washington.edu/scripts/dynacrumbs.js
> (feel free to rename my cheesy file) 
> 
> Updates:
> 1) Comments have been added to show you exactly how to customize the
> opening link in the breadcrumb chain.  The previous version took the
> first segment of the URL and used that for the first link.  Reason: the
> first segment of our URL is the name of the web site.  The new version
> shows you exactly how and where to change this.  For example, if your
> URL begins with "www.mycompany.com," you can customize the script so
> that "Www" will not appear as the first link in the chain.  You can have
> it say "MyCompany" or "Home" or any text you choose. 
> 
> 2) I added opening/closing <strong> tags to the lines that create the
> last link in the chain.  This is based on a recommendation I read in
> <i>Don't Make Me Think!</i> by Steve Krug.  If you don't like it, simply
> go down the script and remove any <strong> or </strong> tags you see.  
> 
> To test the script in your site, you can do three things:
> 1) Copy and paste the script into your web page in between the head tags
> by adding <script type="text/javascript"> and </script> to the beginning
> and ending of the script, respectively.  It would look like this:
> <head>
> <title>my title</title>
> <script type="text/javascript">
> Paste the code here
> </script>
> </head> 
> 
> 2) *Recommended*--You can save the .js file (and rename it if you like)
> to the directory of your choosing and link to it from your web page like
> so:
> <head>
> <title>my title</title>
> <script type="text/javascript"
> src="anyDirectoryYouWant/filename.js"></script>
> </head> 
> 
> Or, if you already link to an external js file 
> 3) You can paste the script into that javascript file, if you don't want
> multiple <script> tags.  To keep it modular, however, I find it more
> useful to break up large scripts into their functions.  If I don't want
> breadcrumbs on one page (e.g., the home page), leaving the breadcrumb
> script out of the mix saves download time for the user. 
> 
> **Final Step**
> In your web page, place this code where you want the breadcrumbs to
> appear:
> <script type="text/javascript">
> createBreadcrumbs()
> </script> 
> 
> That's it!  You can style the breadcrumbs (always separate style from
> content) any way you choose by wrapping the <script> tags in a <div
> class="breadcrumbs"></div> arrangement and create a ".breadcrumbs" class
> in your CSS file. 
> 
> I hope that helps. 
> 
> Best Regards,
> Harry 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript