Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006)

256	C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

</li>

<li><a href="portal.php">Company Portal</a></li> <li><a href="mailserver.php">eMail Solutions</a>

<ul>

<li><a href="privatemail.php">Private POP3/SMTP</a></li> <li><a href="lists.php">Listservers</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="services.php">Services</a> <ul>

<li><a href="training.php">Employee Training</a></li> <li><a href="audits.php">Auditing</a></li>

<li><a href="bulkmail.php">Bulk sending/email campaigns</a></li> </ul>

</li>

<li><a href="pricing.php">Pricing</a></li> <li><a href="about_us.php">About Us</a>

<ul>

<li><a href="our_offices.php">Our offices</a></li> <li><a href="our_people.php">Our people</a></li> <li><a href="vacancies.php">Jobs</a></li>

<li><a href="partners.php">Industry Partners</a></li> </ul>

</li>

<li><a href="contact.php">Contact Us</a> <ul>

<li><a href="snail.php">Postal Addresses</a></li> <li><a href="callback.php">Arrange Callback</a></li>

</ul>

</li>

</ul>

The reason is that, even without any style sheet, the structure and the hierarchy of the navigation is obvious to the visitor. You can also style the navigation without much hassle, as all elements are contained in those higher up in the hierarchy, which allows for contextual selectors.

■Note We’re not going to discuss here whether it makes sense to offer every page of the site in the navigation (as this is traditionally the job of a site map). In the next chapter, we will revisit this topic and offer it as a choice to the user.

C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

257

Basic web site usability and common sense dictate that the currently shown page should not link to itself. To keep this from happening, replace the current page link with a STRONG element, which also means that users without CSS understand where they are in the navigation, and you get a chance to style the current page differently as part of the navigation without having to resort to CSS classes. Using a STRONG element instead of a SPAN also means that users without CSS get an obvious indicator which item is the current one.

For example, on the Mini CMS page, the navigation would be as follows:

exampleHighlightedSiteNavigation.html (excerpt)

<ul id="nav">

<li><a href="index.php">Home</a></li> <li><a href="products.php">Products</a>

<ul>

<li><a href="cms.php">CMS solutions</a> <ul>

<li><strong>Mini CMS</strong></li>

<li><a href="ncc1701d.php">Enterprise CMS</a></li> </ul>

</li>

</ul>

</li>

You have to do this server side, as it wouldn’t make sense to highlight the current page in JavaScript (which, of course, wouldn’t be hard to do by comparing all the link href attributes with the window.location.href).

Expecting this HTML structure allows you to create an Explorer-like expanding and collapsing menu. A menu item that contains other items should show or hide its child items when you click it. However, the logic of the script is probably a bit different from what you’d expect. For starters, you don’t have to loop through all the links of the menu. Instead you do the following:

1.Add a CSS class to the main navigation item that hides all nested lists.

2.Loop through all UL items in the navigation (as those are the nested submenus).

3.Add a CSS class indicating that this list item contains other lists to the parent node of each UL.

4.Add a click event on the first link inside the parent node.

5.Test whether the parent node contains any STRONG elements and add the class to show the UL if there is one—thus preventing the submenu the current page is in to be hidden. You replace the parent class with an open one to show that this section is already expanded.

6.The click event listener method needs to check whether the first nested UL of the parent node has the show class and remove it if that is the case. It should also replace the open class with the parent class. If there is no show class, it should do the exact opposite.

258	C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

The demo document exampleDynamicSiteNavigation.html does this, with the Mini CMS page defined as the current page to show the effect. Figure 7-4 shows how this looks in Firefox 1.5 on Windows XP.

Figure 7-4. A tree menu with JavaScript and CSS

The script’s skeleton is rather short; you define all the necessary CSS classes as properties, the ID of the navigation as another property, and init() and changeSection() methods to apply the overall functionality and expand or collapse the sections accordingly.

siteNavigation.js (skeleton)

sn = {

dynamicClass : 'dyn', showClass : 'show', parentClass : 'parent', openClass : 'open', navID : 'nav',

init : function() {}, changeSection : function( e ) {}

}

DOMhelp.addEvent( window, 'load', sn.init, false );

The init() method defines a variable called triggerLink and checks for DOM support and whether the necessary navigation element is available before applying the dynamic class to hide the nested elements.

C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

259

siteNavigation.js (excerpt)

init : function() { var triggerLink;

if( !document.getElementById || !document.createTextNode ) { return;

}

var nav = document.getElementById( sn.navID ); if( !nav ){ return; }

DOMhelp.cssjs( 'add', nav, sn.dynamicClass );

It then loops through all the nested UL elements and stores a reference to the first link inside the parent node as triggerLink. It applies a click event calling the changeSection() method and adds the parent class to the parent node.

siteNavigation.js (continued)

var nested = nav.getElementsByTagName( 'ul' ); for( var i = 0; i < nested.length; i++ ){

triggerLink = nested[i].parentNode.getElementsByTagName('a')[0]; DOMhelp.addEvent( triggerLink, 'click', sn.changeSection, false );

DOMhelp.cssjs( 'add', triggerLink.parentNode, sn.parentClass ); triggerLink.onclick = DOMhelp.safariClickFix;

The code tests whether the parent node contains a STRONG element and adds the show class to the UL and the open class to the parent node if that is the case. This prevents the current section from being hidden.

siteNavigation.js (continued)

if(nested[i].parentNode.getElementsByTagName( 'strong' ). length > 0 ){

DOMhelp.cssjs( 'add', triggerLink.parentNode, sn.openClass); DOMhelp.cssjs( 'add', nested[i], sn.showClass);

}

}

},

260	C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

All the event listener method changeSection() needs to do is to get the event target, test whether the first nested UL of the parent node has the show class applied to it, and remove that UL if that is the case. Furthermore, it needs to change the open class of the parent node to parent and vice versa.

siteNavigation.js (continued)

changeSection : function( e ){ var t = DOMhelp.getTarget( e );

var firstList = t.parentNode.getElementsByTagName('ul')[0]; if(DOMhelp.cssjs( 'check', firstList, sn.showClass ) ) {

DOMhelp.cssjs( 'remove', firstList, sn.showClass ) DOMhelp.cssjs( 'swap', t.parentNode, sn.openClass, sn.parentClass );

} else {

DOMhelp.cssjs( 'add', firstList,sn.showClass ) DOMhelp.cssjs( 'swap', t.parentNode, sn.openClass, sn.parentClass );

}

DOMhelp.cancelClick( e );

}

}

DOMhelp.addEvent( window, 'load', sn.init,false );

This script, applied to the right HTML and styled with an appropriate style sheet, will give you the expanding and collapsing navigation. The relevant parts of the CSS are as follows:

siteNavigation.css (excerpt)

#nav.dyn li ul{ display:none;

}

#nav.dyn li ul.show{ display:block;

}

#nav.dyn li{ padding-left:15px;

}

#nav.dyn li.parent{

background:url(plus.gif) 0 5px no-repeat #fff;

}

#nav.dyn li.open{

background:url(minus.gif) 0 5px no-repeat #fff;

}

C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

261

You can show and hide the nested UL elements by setting the values of their display properties to block and none, respectively. This also takes the contained links out of the normal tabbing order: keyboard users won’t have to tab through all the links in the nested lists if they want to reach the next element on the same hierarchical level without expanding the section. If they hit Enter first to expand the section, they will be able to navigate through the submenu links with the Tab key.

All LI elements get a left padding to allow for an indicator image to show that the section has child links or that it is open. The LI elements with the class open or parent get a background image to indicate their state.

All of this is pretty nice, but what if you want to provide a link to the parent pages of the nested sections? The solution is to add a new linked image before each of the parent links that does the showing and hiding and leaving the link as it is.

The demo page exampleIndicatorSiteNavigation.html shows what this looks like and how it works. The script does not have to change that much:

siteNavigationIndicator.js (excerpt)

sn = {

dynamicClass : 'dyn', showClass : 'show', parentClass : 'parent', openClass : 'open',

The first change is that you need two new properties that provide the images to be added to the parent nodes of the nested lists. These will be added via innerHTML to make it easy for the maintainer to replace them with other images or even text if desired.

siteNavigationIndicator.js (continued)

parentIndicator : '<img src="plus.gif" alt="open section" title="open section">',

openIndicator:'<img src="minus.gif" alt="close section" title="close section">',

navID : 'nav',

init : function() {

var parentLI, triggerLink;

if( !document.getElementById || !document.createTextNode ){ return;

}

var nav = document.getElementById( sn.navID ); if( !nav ){ return; }

DOMhelp.cssjs( 'add', nav,sn.dynamicClass ); var nested = nav.getElementsByTagName( 'ul' ); for( var i = 0; i < nested.length; i++ ) {

262	C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

Instead of taking the first link in the parent node as the trigger link, you create a new link element, set its href attribute to a simple hash to make it clickable, and add the parent indicator image defined earlier as its content. Then insert the linked image as the first child of the parent node.

siteNavigationIndicator.js (continued)

parentLI = nested[i].parentNode;

triggerLink = document.createElement( 'a' ); triggerLink.setAttribute( 'href', '#' ) triggerLink.innerHTML = sn.parentIndicator; parentLI.insertBefore( triggerLink, parentLI.firstChild );

The rest of the init() method stays almost as it was, with the difference that you not only apply the classes when the parent node contains a STRONG element, but also replace the “parent” indicator image with the “open” one.

siteNavigationIndicator.js (continued)

DOMhelp.addEvent( triggerLink, 'click', sn.changeSection, false);

triggerLink.onclick = DOMhelp.safariClickFix; DOMhelp.cssjs( 'add', parentLI, sn.parentClass );

if( parentLI.getElementsByTagName( 'strong' ).length > 0) { DOMhelp.cssjs( 'add', parentLI, sn.openClass ); DOMhelp.cssjs( 'add', nested[i], sn.showClass ); parentLI.getElementsByTagName( 'a' )[0].innerHTML = sn.openIndicator

}

}

},

The difference in the changeSection() method is that you need to ensure that the event target was a link and not the image by comparing the node name of the target with A.

siteNavigationIndicator.js (continued)

changeSection : function( e ){ var t = DOMhelp.getTarget( e );

while( t.nodeName.toLowerCase() != 'a' ) { t = t.parentNode;

}

C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

263

The rest of the method stays the same with one difference—you change the content of the link in addition to applying the different classes.

siteNavigationIndicator.js (continued)

var firstList = t.parentNode.getElementsByTagName( 'ul' )[0]; if( DOMhelp.cssjs( 'check', firstList, sn.showClass ) ) {

DOMhelp.cssjs( 'remove', firstList, sn.showClass ); DOMhelp.cssjs( 'swap', t.parentNode, sn.openClass, sn.parentClass);

t.innerHTML = sn.parentIndicator;

}else {

DOMhelp.cssjs( 'add', firstList, sn.showClass ) DOMhelp.cssjs( 'swap', t.parentNode, sn.openClass, sn.parentClass );

t.innerHTML = sn.openIndicator;

}

DOMhelp.cancelClick( e );

}

}

DOMhelp.addEvent( window, 'load', sn.init, false );

All of this is just one example of enhanced site navigation and is probably the easiest one to use. Making a multilevel drop-down navigation menu accessible, for example, that also works for mouse and keyboard users alike is an immense task that is not within the scope of this book, as it is very advanced DOM scripting.

■Note A very good explanation of why dynamic menus should not work by tabbing through the links but instead offer cursor-based navigation appears on the Mozilla.org site, where a lot of very gifted developers work on the issue (while breaking some HTML rules that prove to be in the way of creating dynamic pages in an accessible manner): http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets. There is also commercial script called Ultimate Drop Down Menu (http://www.udm4.com) that gets it right.

Pagination

Pagination means that you cut down a large set of data into several pages. This is normally done on the back end, but you can use JavaScript to make it quicker to check a long list of elements.

A demo of pagination is examplePagination.html, which appears in Firefox 1.5 on Windows XP as shown in Figure 7-5.

264	C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

Figure 7-5. Paginating a large set of data rows

The content to be manipulated consists of a set of rows of the same HTML table, which has the class paginated.

examplePagination.html (excerpt)

<table class="paginated"> <thead>

<tr>

<th scope="col">ID</th>

<th scope="col">Artist</th> <th scope="col">Album</th> <th scope="col">Comment</th>

</tr>

</thead>

<tbody>

<tr>

<th>1</th> <td>Depeche Mode</td>

<td>Playing the Angel</td>

<td>They are back and finally up to speed again</td> </tr>

<tr>

<th>2</th>

<td>Monty Python</td>

C H A P T E R 7 ■ J A V A S C R I P T A N D U S E R I N T E R A C T I O N : N A V I G A T I O N A N D F O R M S

265

<td>The final Rip-Off</td>

<td>Double CD with all the songs</td> </tr>

[... and so on ...] </tbody>

</table>

We used pagination in the last chapter in the slide show example, although the example showed one item at a time. The logic of pagination with several items is much more complex, but this example should give you an insight to the tricks you can use.

•You hide all the table rows via CSS.

•You define how many rows should be shown on each page.

•You show the first rows and generate the pagination menu.

•This menu has a “previous” and “next” link and a counter telling the user which slice of the data is to be shown and how many items there are in total.

•If the current slice is the first, the “previous” link should be inactive; if it is the last, the “next” link should be inactive.

•The “next” link increases the start value of the slice by the amount defined, and the “previous” link decreases the start value.

You will use several properties and five methods in this example. It is a good idea to comment the properties to make it easier for future maintainers to alter them to their needs.

pagination.js (skeleton)

pn = {

// CSS classes

paginationClass : 'paginated', dynamicClass : 'dynamic', showClass : 'show',

paginationNavClass : 'paginatedNav',

//Pagination counter properties

//Number of elements shown on one page Increase : 5,

//Counter: _x_ will become the current start position

//	_y_ the	current end	position and
//	_z_ the	number of all data rpws
Counter : ' _x_ to _y_ of _z_ ',
// "previous" and "next"		links, only	text is allowed
nextLabel : 'next',

previousLabel : 'previous',