Results 1 to 10 of 10

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

  1. #1
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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...!!



    Code:
    /************************* 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 ************************************/

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    (college project)
    We don't do homework.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

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

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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

  6. #6
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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 ?

  7. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. #8
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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

  9. #9
    Join Date
    Oct 2006
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •