The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Help me understand the crumbs in very simple steps?

Hi,

I am new the forum and javascript. I am trying to understand how breadcrumbs work, but am unable to find a tutorial that would break the whole process down in very simple terms. I understand how the crumbs work once placed on a web page, but would appreciate it if someone can break the steps down in right sequence

This is not something that should be done with javascript. It should be done on the server side because it makes it easier to keep track of where the user is within a hierarchy. There are probably a variety of ways to do this but the simplest is probably to simply have a large tree containing everything (perhaps as a large multidimensional array) and you locate where the user is and then build the breadcrumbs from there. If the URL is a direct reflection of the hierarchy, then you could just build it directly from the URL. Or if the hierarchy is related to the directory structure, you could also do that (unless it's the same thing as doing it via the URL).

Have a look on google for something like "php breadcrumbs" (or whatever your server-side programming language of choice is).

Well, it depends very much on what you're going to base it on. Are you going to base it on directory structure, URL or a predefined array that represents the entire tree of possible breadcrumb routes? You could also have some system where you query a database with some parameters and it returns the breadcrumb thread.

In very general terms, you would do this:

Somehow obtain the breadcrumb data into an array

Loop through the array

In each iteration, create an anchor (<a>) with the iteration's data followed by a symbol to indicate it's the parent of whatever comes next

At the end of the iteration, do a check to see if it's the last element in the array. If this is the case, don't output the symbol.

You might want to mark it up with a list (<ol>) or just put it all in a <div> or <p>.

But like I said, it depends where you're going to get the breadcrumb data from.