Breadcrumbs (page location indicator) - HTML

If you’ve ever seen a series of links at the top of a browser window with the current page’s link deactivated, you’ve seen breadcrumbs. Breadcrumbs derive their name from the concept of a navigation trail, designed to help users know where they are relative to the page they are in. Many user interface experts consider breadcrumbs an absolute necessity. Generally, you’ll find breadcrumbs most easily managed through server-side scripting, but if you don’t want to deal with server-side scripting, or, if you simply don’t have access to a server-side scripting engine (maybe you are simply creating some pages on your home page offered by your ISP), you can create them using JavaScript.

Writing out the code in pseudo-code
Generally, the best way to develop any code is to spell it out in pseudo-code. In other words, think about what you’re trying to do in English or whatever your spoken language is. In this case, our pseudo-code looks like this:

Using the window object to manage URLs
As I mentioned, most action using JavaScript takes place by way of the DOM, which you’ll see in action in the upcoming JavaScript breadcrumb example. In this case, you’ll use the window location property to handle the first part of your pseudo-code. The location property contains the current window’s URL. You’ll need this URL because in order to develop breadcrumbs according to the pseudo-code, you’ll need to break apart the URL string and rip out each directory from it. You do this by separating each chunk of string that is delimited by a forward slash.

Therefore, the first step in creating breadcrumbs is to initialize a JavaScript variable to store the URL, as in the following example:

var sURL = window.location.toString();

Building string arrays with the split() method
Once you’ve got your URL string, you can use the JavaScript split() method to store an array of substrings from the URL string you stored in the sURL variable. The split() method splits a string according to a delimiter you name as the method’s argument. It stores each substring as part of an array, indexed in character sequence. This means you don’t need to initialize an array with something like this:

var sDir = new Array();

Instead, you can initialize the array by using the split() method:

var sDir=sURL.split(“/”);

Remembering that array indexes are counted beginning with 0, not 1, if your URL is
the preceding code fragment will create an array that looks like this:

Next, initialize a variable to store your output string:

var sOutput=“”;

Then, create a JavaScript for loop to loop through the array. Note that the loop looks a little different than some loops you may have seen:

for (y=2;y<(sDir.length-1);y++)

What’s different about this loop? Usually, you start such a loop with y=0 (or, more often, i=0, but i is simply the name of the new loop variable and we already are using that in another part of the code, as shown in Listing 26-1). Of course, in many instances you won’t start a loop at an array’s zero index value, and this is one of them, because you happen to know that the first two “splits” contain parts of the string related to the protocol.

Building a Simple Breadcrumbs Header

Listing shows the breadcrumb code in its entirety. Note that it appends an index.html to each directory (shown in bold in the listing), so you might have to change that to your directory’s homepage.If you look, you can see there is one thing about the results you might not like. It would be better to have a “dry” breadcrumb containing a nonactive link for the page the user is currently on. Accomplishing that takes some JavaScript sleight of hand, but luckily, resources are already available for you to work with, as you’ll see in the next section.

Fine-tuning your breadcrumbs

One example of an Internet-based resource you can rely on for creating breadcrumbs is a GNU-based JavaScript file that is freely downloadable over the Internet, including through this book’s Web site. This is a much more finely tuned example of a breadcrumb script that accounts for a large number of variables.

Note GNU is an open source licensing model that allows you to freely distribute and modify software, with some minor legal constraints, such as giving credit to the author of the software.

You’ll need to make one change in the JS file you download. You will want to wrap the entire script in a function named breadcrumbs, like this:

In other words, you need to add the following line to the top of the script and a closing brace (}) to the end of the script:

function breadcrumbs() {

This turns the script into a function, which can then be called in the part of the page requiring the breadcrumbs.Shows how to use it in your HTML.

Using a Breadcrumbs JavaScript File

As you can see, using the JavaScript is as simple as inserting a link to it in the head element of your HTML and calling it on the part of the page you need the breadcrumbs to display.

If you want to skip the step of giving the script a function name, you can simply import the script in the part of the page where you need the breadcrumbs to appear. Replace the bold script element:

<script type=“text/javascript” src=“/js_paths.js”></script>

If you choose this method, don’t import the JS file in the head element. You might be wondering why to bother creating the breadcrumbs() function at all. It appears to be more work. If your Web page uses a lot of JavaScript, it’s a good idea to import all your JavaScript in the page header and call functions as needed, because it gives you a more modular design. This is truer when working with a lot of JavaScript code. If you aren’t using much JavaScript, you should simply use whichever method is most comfortable to you.

You’ve probably seen image rollovers and may know how to code them. This section shows you how to create rollovers using CSS. First, you’ll see how easy rollovers can be with CSS that requires no scripting using the a:hover pseudo-class. Then, you’ll see how to manipulate CSS properties in rollovers using JavaScript.

Creating rollovers using the a:hover pseudo-class
The easiest kind of rollover is to simply use CSS. You don’t even need to use JavaScript. Instead, you can use the CSS a:hover pseudo-class to change the color or text size of an object. You can also change the background color or any other CSS property. This is all as simple as defining the a:hover pseudo-class within a stylesheet:

In the preceding code fragment, a button is defined in the .button class, and then a background-color property is defined for the a:hover pseudo-class. Whenever the a:hover pseudo-class is used, the properties of its target take on whatever you defined for it as soon as the user’s mouse “hovers” over the object. However, you’re not quite finished. Can you figure out why that CSS alone will not create the rollover on the following HTML?

The a:hover pseudo-class works only on links, so you need to create a link for the desired effect to work. Listing shows how to create the appropriate CSS and HTML to make the rollover effect work.

Creating a Rollover Effect Using CSS

Note the link that is created for each button. Here, you simply assign a # identifier in lieu of a full link (but normally, of course, you’d insert a real URL). Note also that a text-decoration property is assigned to both the a element and the a-hover pseudo-class. This is done to avoid an underline being shown in the button. Finally, notice one additional bit of easy code that can make your links more dynamic. The title attribute is an underused HTML attribute that you can use on all HTML elements to add meaning to them. It’s particularly useful on a elements. On browsers that support the title attribute, links are just that much more dynamic because when the mouse hovers over elements with title attribute values, a small “help” window, known as a ToolTip, appears.

Using display properties with a:hover to create rollovers
You can push the aforementioned concepts further by combining the a:hover with display properties to create genuine rollover effects. There is no JavaScript involved. They work because you can give an element a unique identifier through the id attribute and take advantage of the different kinds of styling mechanisms available to anchor tags. First, you define a div element to wrap around the a elements that serve as linked menu items, making sure to give the div element a unique identifier:

The first part of each link is displayed as a button. The second part of each link, contained in a span element, is the part that will appear below the menu item dynamically when a user’s mouse rolls over the button. This acts as a description of the link, and provides more information to the user. This is possible by declaring the following CSS rule for div elements with link id attribute values:

div#links a span {display: none;}

This tells the browser that no span elements contained within links that are themselves contained in div elements with item id attributes should be displayed. The a:hover pseudo-class can then be used to display that same span element’s content when a user’s mouse is “hovering” over the link:

Change the value in bold in the preceding code to place exactly where you want your menu description to appear. You can download a running example of this from the downloadable code for this book. The file name is cssrollover.htm. Eric Meyer developed this and other similar CSS techniques, and a similar file and many more can be found on his Web site at demo.html.
A ToolTip as rendered in a browser when the title attribute is used on a link.

A ToolTip as rendered in a browser when the title attribute is used on a link.
Creating rollovers using JavaScript
Creating rollovers using JavaScript can be as simple or as tedious as you wish it to be. Best practice would suggest that you should create rollovers, like any other JavaScript-based functionality, in a way that creates the least problems for the most users.
You can take advantage of the narrowing gap in differences among browsers by relying on the event models of IE5/6 and Mozilla (and by extension Netscape 7). For example, the following bit of code creates a rollover of sorts that results in a JavaScript alert box display when a user mouses over a portion of text:

To use this rollover, <span style=“color:red; cursor:hand;” onMouseOver=“alert(‘AMAZING!!!’)”> mouse over these words</span>.

When a user mouses over a portion of text, an alert box is displayed.

When a user mouses over a portion of text, an alert box is displayed.

Mozilla/Netscape 7 and IE5/6 allow all elements to use event handlers such as onmouseover. But because it’s an attribute, browsers that don’t support event handlers in all their elements will simply ignore the call to the JavaScript because they simply ignore the attribute itself. Keep this concept in mind when you’re working with DHTML. In other words, try to limit the damage. The beauty of CSS is if you use it right, browsers that don’t support CSS will simply ignore your styling, and the same is true for the use of event handlers in HTML. The same principle holds for CSS-based changes, even if you’re using deprecated elements such as the font element:

When a user mouses over a portion of text, the background color is changed.

When a user mouses over a portion of text, the background color is changed.
In the old days of browser wars and incompatibilities, these examples would only work in Internet Explorer, but now they’ll work in Mozilla-based browsers, too.

Note Saying that something works in Mozilla-based browsers means browsers based on the new open source Mozilla 1.0 codebase governed by the Mozilla Public License and Netscape Public License. Mozilla versioning can be confusing, because JavaScript tests for user agents will reveal (on a Windows machine) something like this: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) for browsers implementing the Mozilla 1.0 codebase. This is because the Mozilla codebase was completely rewritten from scratch, and the old Navigator codebase was tossed into the ash heap forever.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics