Building a navbar from an array - need help!

Hi -

I'm writing a script that will build a navbar for a learning module from an array of objects.

The navbar script will be included on all pages of the module, and although you need to hardcode it once, any changes can be made easily on just the one page. The cool thing about it is, the array can be replaced on the fly with a different array, as the person makes decisions about which paths to follow through the module.

My problem is: I can get the navbar to build and style itself from the array up to a point. However, many of the styles depend on knowing the chapter and level of the current page you are on in the module. The way I have figured out to do this is to compare the URL of the current document to the URLs of the items in the array. If the URLs match, then "currentPage = PageArray[i]" and currentPage then has all the properties of that object, including chapter, url, level, etc.

So I need a function to go through all the items of the array and find "currentPage", but as soon as it finds currentPage, I need it to stop, then go through the whole array again and draw each item, with styles coordinated with currentPage's properties. I am not yet rock-solid on nesting functions, and keeping track of which variables can be used where, so this has been a challenge.

An example of the page array is below. My most current version of this is here:
example of navbar (http://thedesignspace.net/arrayTest/index.shtml
)

//this is a list of all the pages, and controls the order they appear. You can put your pages in any order, as long as they are listed here in the order you want.
var pageNo= new Object;
pageNo.value

var thispage = document.location.href;
/*be VERY careful not to delete any commas, single quotes, or other punctuation. Titles can be as long as needed. URLs need not be in the form of page01.htm, etc - they can be any url. Chapters need not be actual chapters: but they will be the items in the nav bar that always stay visible. Levels above '1' will be hidden unless the current page is in that chapter. */
var PageArray = new Array(
{title:'intro', url:'index.shtml', chapter:0,level:1},
{title:'chapter 1',url:'page02.shtml',chapter:1,level:1},
{title:'A. some subject',url:'page03.shtml',chapter:1, level:2},
{title:'B. some other subject',url:'page04.shtml',chapter:1,level:2},
{title:'chapter 2',url:'page05.shtml',chapter:2,level:1},
{title:'some content',url:'page06.shtml',chapter:2,level:2},
{title:'some more content', url:'page07.shtml',chapter:2,level:2} //this last item does NOT get a comma
); //do not delete this punctuation


** function printNavBar() {
//repeat the following functions for every item in the array.
var currentPage
for(var i=0; i<PageArray.length; i++) {
var pageInstance = PageArray[i];
var level = PageArray[i].level;
var chapter = PageArray[i].chapter;
var url = PageArray[i].url;
var title = PageArray[i].title;
var expand = 'closed';

*/*test the array item's url for equality with the current page's URL.
If they are the same, set the variable "current page" to be this array item so you can grab its associated attributes such as level, chapter and title to use in future functions*/
if (thispage.indexOf(pageInstance.url) !=-1 ) {
var currentPage=pageInstance;
alert('i= '+i+' currentPage.url= ' + currentPage.url);
document.variableHolders.pageNo.value=i+1;
};
//put the value of "i+1" for the current page into a form field somewhere on the page accessible from the global level for use with page numbering and navigation

//as we move down through the array, any page with a level of '1' gets the class of "open" so it displays as expanded in the navbar.

if (level == 1){
expand='open';
}

else if (chapter == currentPage.chapter){
expand='open';
}
else if (level!=1 && chapter != currentPage.chapter) {
expand='closed';
}

//print the html code for one navbar item
document.getElementById('NavBar').innerHTML += ('<li class= "level' + level + " " + expand +'" ><a href=' + url + '>' + title + '</a></li>');

}
}

Finding the current page is no problem, but I have other concerns. You seem to have to no fall-back navigation -- visitors who don't have javascript enabled will be completely unable to navigate. And you are using li's incorrectly: they are meant to be children of ul or ol. You're treating them as generic block elements, as div's essentially.

To get the current page, remove your current 'find the current page' block from printNavBar, and sub infunction findCurrentPage(){
for(var i=0; i<PageArray.length; i++) {
if (thispage.indexOf(PageArray[i].url) !=-1 ) {
return PageArray[i];
}
}
return {};
}

function printNavBar() {
var currentPage=findCurrentPage();

Thanks - it is working here:

Click here (http://thedesignspace.net/arrayTest3/index.shtml)

I appreciate the help!

I will have to think about the accessibility issues. The problem with scorm learning modules is: if you don't have javascript enabled, you are kind of out of luck anyway - your score will not be recorded, and many of the interactions will simply not work. But I am going to provide an alternative for the navigation. thank you for bringing that up.

Good point on being out of luck on module interaction for the javascript disabled. With the main purpose of the pages being dependent on scripts, I wouldn't worry too much about alternate navigation. Maybe just a barebones one, so folks could see enough to decide whether it's worth it to activate js or not.