This bit of JavaScript allows you to place a breadcrumb type trail of history on a page. This shows the user where they have been on the site and allows them to navigate back with a little more detail. So to achieve this the code will save in a cookie where the user has been and build up the crumbs every time they go to somewhere new. The cookie holds the link to the page they visited and the title of the page for a readable description.

To get the crumbs set up and working all you need to do is include the .js file on your web pages and then write the following JavaScript where ever you wish to show the crumbs. The number you pass in is the number of crumbs you want to show on the page, in this case 3. To show all history crumbs pass in -1.

<script type="text/javascript">// < ![CDATA[
document.write(CookieCrumbs(3).GetCrumbs());
// ]]></script>

The code fails gracefully on any errors or if the client browser has cookies turned off. It just writes an empty string to the page in those cases. We are using cookies here so the script will recognise when the user has started a new session on your domain and clear out any old cookies they may have from previous visits so as to start the crumbs from fresh (as long as you have the crumbs on the first page the user hits your domain at). Failing this there is a DeleteCookieTrail() function which you may call to clear out old history.

Tested to work in the following browsers;

• IE 7 & 6
• FireFox 2.0.0.11
• Opera 9.24
• Safari for windows

Demo: http://www.tomcoote.co.uk/JavaScript/CookieCrumbs/test5.html
Download: http://www.tomcoote.co.uk/Downloads/CookieCrumbs.rar
Source: http://www.tomcoote.co.uk/JavaScriptCookieCrumbs.aspx

Related Listings:

1. MinMax Elements I built this JavaScript so that I could get a...
2. Tab Inline Editable Elements I have been spending a lot of time at work...
3. Corner Dock Icons Script Move your mouse over one of the smaller icons around...
4. Dynamic Menu using MooTools This menu build did for Mootools way back even before...
5. Dynamic HTML News Scroller Dynamic HTML News Scroller is a fully customizable vertical text...

Do you like this post?

Email: