Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] Dynamic breadcrumbs script

  • From: javascript@xxxxxxxxxx (Harry Love)
  • Subject: [Javascript] Dynamic breadcrumbs script
  • Date: Fri, 16 Aug 2002 19:59:17 -0700
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