Jump to content

Questions about Javascipt Menu


Darkie
 Share

Recommended Posts

Hi AllMy skill for javascript is very poor. But, I had a task to do for the project I am currenlty doing.I first searched you site, and saw some people asking about something similar to what I have. But, I didnt know understand the answers posted since Im not that much of a js guru. I am more in OSS. I am really struggling with this.Say, I have a 3 Main folders with more than 5 submenu on them. Each time when I click the Main folder 1, it should expand. And when the Main folder 2 is clicked the Main folder 1 should be closed automatically.Same applies for the submenus.I have managed to get the script to do that, but now the problem is that. Everytime i click the submenu as a link now, the page reloads and the menu closes. But I want it to stay open so that I can see exaclty where I am in terms of navigation. My pages are devided into sections/template. The below makes the page. index.php<?php include('inc_top.php'); ?> <?php include('capture_year_new.php'); ?><?php include('inc_bottom.php'); ?>Here is my code:var nIndex=0 ;var aMenu=new Array(); var Menu = new Array();// Pre load images - defined order should stay as is for proper functionality;if (document.images){imgFolderOpen = new Image(18, 18);imgFolderOpen.src = "/wmis/images/open1.gif";imgFolderClosed = new Image(18, 18);imgFolderClosed.src = "/wmis/images/closed1.gif";imgPageNode = new Image(18, 18);imgPageNode.src = "/wmis/images/list.gif";}function getMenu(pSection){switch(getQueryStringValue('menu')){ default : addMenu(Menu=["L1_Current", "", "", "Current", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);addMenu(Menu=["L2_Admin", "L1_Current", "", "Admin functions", "", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);addMenu(Menu=["L3_year", "L1_Current", "L2_Admin", "Capture Year", "capture_year.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); addMenu(Menu=["L3_assignuser", "L1_Current", "L2_Admin", "Assign User", "assignuser.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); addMenu(Menu=["L1_History", "", "", "History", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);addMenu(Menu=["L2_workplan_h", "L1_History", "", "Workplan", "searchbyyear.php", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);addMenu(Menu=["L3_SG_h", "L1_History", "L2_workplan_h", "SG Workplan", "sg_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); addMenu(Menu=["L3_PW_h", "L1_History", "L2_workplan_h", "Personal Workplan", "p_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]);addMenu(Menu=["L1_logout", "", "", "Logout", "logout.php" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);addMenu(Menu=["L1_help", "", "", "Help", "" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);break; }}function getQueryStringValue(pstrWhich){var strQueryStr = window.location.search.substr(1);var arrQueryStrI = strQueryStr.split("&");var arrQueryStrJ;var arrQueryStrK = new Array();for(i=0; i < arrQueryStrI.length; i++){arrQueryStrJ = arrQueryStrI.split("=");if (arrQueryStrJ[0]){arrQueryStrK = [arrQueryStrJ[0], arrQueryStrJ[1]];if (arrQueryStrK[0] == pstrWhich) {return arrQueryStrK[1]}; }}}function getLinkandParents(){var strWindowPathFull = window.location.pathname + window.location.search;var strMenuPath = "";var strLinkandParents = "";strWindowPathFull = strWindowPathFull.toLowerCase();for (i=0;i<aMenu.length;i++){strMenuPath = aMenu[4].toLowerCase();if (strWindowPathFull == strMenuPath){strLinkandParents = aMenu[0] + ";" + aMenu[1] + ";" + aMenu[2];}}return strLinkandParents;}function addMenu(pArray){aMenu[nIndex] = pArray; nIndex++}function toggleLevel2(pobjTag) {var objChild; var objOther; var strWinPath; var strCurrLinkId;strWinPath = window.location.pathname + window.location.search;for(i=0;i<aMenu.length;i++){if (pobjTag.id == aMenu[1]){objChild = document.getElementById(aMenu[0]);if (objChild.style.display == "none"){if ((aMenu[0].substr(0,2) == "L2") && (aMenu[4] == strWinPath)) {strCurrLinkId = aMenu[0]; }if ((aMenu[2].length == 0) || (aMenu[2] == strCurrLinkId)){objChild.style.display = "block";}}else{objChild.style.display = "none";}}else{if (aMenu[1].length > 0 && pobjTag.id != aMenu[2]) {sOther = document.getElementById(aMenu[0]);sOther.style.display = "none";}}}}function toggleLevel3(pobjTag) {var objChild; for(i=0;i<aMenu.length;i++){if (pobjTag.id == aMenu[2]){objChild = document.getElementById(aMenu[0]);if (objChild.style.display == "none"){objChild.style.display = "block";}else{objChild.style.display = "none";}}}}function swapImgLevel2(pobjTag, pstrLevelFrom){if (pstrLevelFrom == "L1"){var strChildImgId; var objChildImg; var strChildId; var strChildLevel; var strWinPath = window.location.pathname + window.location.search;for (i=0;i<aMenu.length;i++){strChildLevel = aMenu[0].substr(0,2);strChildImgId = "img" + aMenu[0]; objChildImg = document.getElementById(strChildImgId);if ((aMenu[1] == pobjTag.id && strChildLevel == "L2" && aMenu[4] != strWinPath) && (objChildImg.src != imgPageNode.src)){objChildImg.src = imgFolderClosed.src;}}}if (pstrLevelFrom == "L1"){var strImgId = "img" + pobjTag.id ; var objImg;objImg = document.getElementById(strImgId);if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;else objImg.src = imgFolderClosed.src;}if (pstrLevelFrom == "L2"){var strImgId = "img" + pobjTag.id ; var objImg;objImg = document.getElementById(strImgId);if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;else objImg.src = imgFolderClosed.src;}}function toggleChildren(pobjTag){var strLevel;strLevel = pobjTag.id.substr(0,2); if (strLevel == "L1"){swapImgLevel2(pobjTag,"L1");toggleLevel2(pobjTag);}if (strLevel == "L2"){swapImgLevel2(pobjTag,"L2");toggleLevel3(pobjTag);}}function onclickMenuItem(pobjTag){var strMenuItemId = pobjTag.id;var strMenuItemURL = "";for (i=0;i<aMenu.length;i++){if (aMenu[0] == strMenuItemId){strMenuItemURL = aMenu[4];}}if (strMenuItemURL.length > 0){self.location.replace(strMenuItemURL);}else{toggleChildren(pobjTag);}}function buildMenu(pstrSection){var arrLinkandParents;var strHome = "default";var strMenu;var strLink="";var strL1Parent="";var strL2Parent="";var strWindowPath = window.location.pathname;strWindowPath = strWindowPath.toLowerCase();getMenu();var strLinkandParents = getLinkandParents(pstrSection);if (strLinkandParents.length > 0) {arrLinkandParents = strLinkandParents.split(";"); var strLink = arrLinkandParents[0]; var strL1Parent = arrLinkandParents[1]; var strL2Parent = arrLinkandParents[2]; }strMenu = "<DIV id='menudiv'><table border=0>" ;for (i=0;i<aMenu.length;i++){strMenu = strMenu + "<tr id='" + aMenu[0] + "' onmouseout='style.cursor=\"default\"' ";if (aMenu[0]!= strLink){strMenu = strMenu + "onclick='JavascriptnclickMenuItem(this);' onmouseover='style.cursor=\"pointer\"' ";} if (aMenu[0].substr(0,2) == "L1"){strMenu = strMenu + " style='display:block' "; }else if ((aMenu[0].substr(0,2) == "L2") && (aMenu[1] == strL1Parent )){strMenu = strMenu + " style='display:block' ";}else if ((aMenu[0].substr(0,2) == "L3") && (aMenu[2] == strLink)){strMenu = strMenu + " style='display:block' ";}else if ((aMenu[0].substr(0,2) == "L3") && (aMenu[2] == strL2Parent )){strMenu = strMenu + " style='display:block' "; }else{strMenu = strMenu + " style='display:none' "; }strMenu = strMenu + " ><td valign= 'top' align='center' width=50> ";if (aMenu[0].substr(0,2) == "L2"){strMenu = strMenu + "   ";}else if (aMenu[0].substr(0,2) == "L3"){strMenu = strMenu + "     ";} strMenu = strMenu + "<img id='img" + aMenu[0] + "' src='" if ((aMenu[0] == strL2Parent) || ((aMenu[0] == strLink) && (aMenu[0].substr(0,2) == "L2"))){strMenu = strMenu + imgFolderOpen.src;}else if ((strWindowPath.indexOf(strHome) != -1) && (aMenu[0]== strLink)){ strMenu = strMenu + imgHomeOff.src;}else{strMenu = strMenu + aMenu[5];} strMenu = strMenu + "' width='" + aMenu[6] + "' height='" + aMenu[7] + "'/></td><td"; if (aMenu[0].substr(0,2) == "L1"){strMenu = strMenu + "";}else if (aMenu[0].substr(0,2) == "L2"){strMenu = strMenu + ""; }else if (aMenu[0].substr(0,2) == "L3"){strMenu = strMenu + ""; }strMenu = strMenu + ">";if ((aMenu[4].length > 0) && (aMenu[0]!= strLink) && (aMenu[0].substr(0,2) == "L3")){ strMenu = strMenu + "<a class='links' href='" + aMenu[4] + "'>" + aMenu[3] + "</a>";} else if (aMenu[0]== strLink){strMenu = strMenu +aMenu[3];}else{ strMenu = strMenu + "<b>" +aMenu[3] + "</b>";}strMenu = strMenu + "</td></tr>"; } strMenu = strMenu + "</table></div>"; document.write(strMenu);} Can somebody ps help me on this, because I am struggling...Thank youDarkie

Link to comment
Share on other sites

Im not that much of a js guru. I am more in OSS.
Isn't Javascript OSS by definition? It's not even possible to have a closed-source Javascript application online. Programming is programming, regardless of whatever paradigm you choose to follow, it doesn't matter if you're working for Microsoft, IBM, Google, or Novell. Which languages do you have experience with?If you want subsequent pages to know which menu choices you clicked on or had open, you would need to have Javascript set and read cookies that keep track of the menu state.http://devguru.com/technologies/javascript/10634.asp
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...