need urgent help (college project) problem with simple DHTML menu with javascript

[jigarshah]

I have made a simple script which displays menu depending on page name given as parameter. On page load i just call this function.

There is an Array which has list of pages. It has a identifier to describe whether this page is child, parent or root
0 - root(no child)
3 - parent
1 - child

I am almost done but there is some wrong logic inside, which displays parent link twice if give child page as parameter (1 is child class).(I hosted this part on free web hosting.)(http://www.yourfreespace.net/users/jigarshah/)

See "My Projects Parent" link is displayed twice in navigation menu.

Please if someone has better solution or can change logic of following function.

Thanks in advance...!!

/************************* for navigation menu ************************************/
function displayNavigationMenu(page) {

	var element = document.getElementById('navigation'); 
	if(element != null) {
		element.innerHTML = drawNavigationMenu(page);
	}
}
function drawNavigationMenu(currentPage) {
  var menuHTML = '<p style="margin-left: 7px; width: 143px;">' ;
//0-root 3-parent 1-child; keep child only under a parent 
  var pages = new Array("0#Home:index.html", 
			"0#Blog:blogger.html", 
			"0#Resume:resume.html", 
			"0#My Papers:mypapers.html",
			"0#My Projects:myprojects.html",
			"3#My Projects Parent:myprojects1.html",
			"1#My Projects Child1:myprojects2.html",
			"1#My Projects Child2:myprojects3.html",
			"1#My Projects Child3:myprojects4.html",
			"3#My P Parent:myp1.html",
			"1#My P Child1:myp2.html",
			"1#My P Child2:myp3.html",
			"1#My P Child3:myp4.html",
			"0#My Photos:myphotos.html",
			"0#Coolquotes:cooloquotes.html", 
			"0#Slambook:slambook.html", 
			"0#Downloads:downloads.html", 
			"0#Links:links.html", 
			"0#Contact:contact.html");

  for(var i=0; i<pages.length; i++) {
	navLevel = parseInt(pages[i].substr(0,pages[i].indexOf("#")));
	var displayName = pages[i].substr(pages[i].indexOf("#") + 1,pages[i].indexOf(":") - 2);
	var pageName = pages[i].substr(pages[i].indexOf(":") + 1);		
	//alert(" navLevel " + navLevel + " displayName " + displayName + " pageName " + pageName);
		if(navLevel == 0) {
			if(currentPage == pageName) {
			menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav active')
			}
			else {	
			menuHTML = menuHTML + getNavigationMenuLink(pageName, displayName, 'nav')
			}
		} else if (navLevel == 3) { // If it encounters currentPage as Parent Page Link
			if(currentPage == pageName) {
			//i = displayParentChild(i,pages,menuHTML,currentPage);
			menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav active')
				while (true) {
//				alert('going back')
					i++;
					navLevel = parseInt(pages[i].substr(0,pages[i].indexOf("#")));
					if (navLevel != 1) {
						i--;
						break;
					}
					var displayName = pages[i].substr(pages[i].indexOf("#") + 1,pages[i].indexOf(":") - 2);
					var pageName = pages[i].substr(pages[i].indexOf(":") + 1);		
					if(currentPage == pageName) {
						menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav sub active')
					}
					else {	
						menuHTML = menuHTML + getNavigationMenuLink(pageName, displayName, 'nav sub')
					}
				}
			} else {
				menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav')
			}
		} else if (navLevel == 1) { 
			// If it encounters currentPage as Child Page Link ; It goes back till it finds parent and Iterates parent till child
//		alert ('if == 1 CURRENT PAGE ' + currentPage  + ' pageName ' + pageName)
			if(currentPage == pageName) {
				//alert ('if == 1' + 'curr==page')
				while (i >= 0) { 
					i--;
					navLevel = parseInt(pages[i].substr(0,pages[i].indexOf("#")));
				//	alert ('going back ' + i + ' navLevel ' + navLevel )
					if(navLevel == 3)
					{
						//i = displayParentChild(i,pages,menuHTML,currentPage);
						var displayName = pages[i].substr(pages[i].indexOf("#") + 1,pages[i].indexOf(":") - 2);
						var pageName = pages[i].substr(pages[i].indexOf(":") + 1);		
						menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav active')
						while (true) { //Display all the child under this Parent
							i++;
							navLevel = parseInt(pages[i].substr(0,pages[i].indexOf("#")));
							if (navLevel != 1) {
								break;
							}
							var displayName = pages[i].substr(pages[i].indexOf("#") + 1,pages[i].indexOf(":") - 2);
							var pageName = pages[i].substr(pages[i].indexOf(":") + 1);		
							if(currentPage == pageName) {
								menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav sub active')
							}
							else {	
								menuHTML = menuHTML + getNavigationMenuLink(pageName, displayName, 'nav sub')
							}
						}
						break;						
					}
				}
			}
		}
	}
 // alert(menuHTML);
 menuHTML = menuHTML + '</p>';
return menuHTML;	
}
function displayParentChild(index,pages,menuHTML,currentPage) {
	var displayName = pages[index].substr(pages[index].indexOf("#") + 1,pages[index].indexOf(":") - 2);
	var pageName = pages[index].substr(pages[index].indexOf(":") + 1);		
	menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav active')
	while (true) { //Display all the child under this Parent
		index++;
		navLevel = parseInt(pages[index].substr(0,pages[index].indexOf("#")));
		if (navLevel != 1) { //Break if no Child
			index--;//To revert if non child element found
			break;
		}
		var displayName = pages[index].substr(pages[index].indexOf("#") + 1,pages[index].indexOf(":") - 2);
		var pageName = pages[index].substr(pages[index].indexOf(":") + 1);		
		if(currentPage == pageName) {
			menuHTML = menuHTML + getNavigationMenuLink(pageName ,displayName ,'nav sub active')
		}
		else {	
			menuHTML = menuHTML + getNavigationMenuLink(pageName, displayName, 'nav sub')
		}
	}
return index;
}
function getNavigationMenuLink(pageName,displayName,class) {
var navigationLink = '<a class="'+ class + '" href="' + pageName + '">' + displayName + '</a><span class="hide"> | </span>' + '\n'
//alert(colorLink);
return navigationLink
}


/************************* end of navigation menu ************************************/

[Twey]

(college project)

We don't do homework.

[jigarshah]

no...please...i m not asking for doing it ...i just want to know approach i am using is correct or not...!!
please ....

[blm126]

Well, why are you generating the menu with javascript. The menu should be plain HTML that is enhaced with javascript.

[codeexploiter]

Yes the menu your site has at the moment doesn't need Javascript at all. There is no point in using Javascript where it is not necessary, the code will simply increase the page size nothing else.

You can create HTML/CSS based menus which offer more efficiency

[jigarshah]

i am using it so if i add or delete a page then i just need to modify at one place only. Not in every page. say If i add a page then i need to modify all 10-20 pages. And this java script will be in an external file. so i will just add one page and thts all. Is there any better alternative to this ?

[djr33]

Very creative use of that. Good idea.

The better way to include one thing in each page, however, would be to use a serverside include (SSI) if your server supports them, or PHP (or asp), which would give you a lot more options.
With php, you could just include that exactly where you wanted from any page on your site, by storing it as a .htm file.

Using javascript to do it is overkill, but a good creative solution.

[codeexploiter]

Instead of using a javascript menu system

1. You can have a individual page that only has your menu system which would be based on CSS/HTML

2.Using PHP or server side tool like PHP you can include it in any page.

Based on the above scheme if you want to change your menu then you don't have to change all the page's menu but the only page where you have inserted the menu.

Using this you can avoid the load of Javascript code in a client browser.

Think about your website in a browser that doesn't support javascript? You can avoid such probs using a file inclusion using php

[jigarshah]

i don't have any serverside scripting support thts y i m using javascript...and for i am not considering non javascript browsers right now...to be frank its an assignment. I am required ti do it with javascript only. ...i have worked on it and its working well..but as i said i have problem with ONLY logic. It works well if i send Parent(3) on root(0) type page. when i send 'currentPage' as childpage(1) then; as it has already displayed it gets displayed twice....anyways i m woring with logic...
THanks for your replies

[djr33]

Ok, for that purpose, then, it makes sense.
(Sorry, I'm a serverside coder myself, not javascript... for the most part... not sure how to help in this case.)