Questions about Javascipt Menu

[darkie_99]

Hi

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

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[i].split("=");
if (arrQueryStrJ[0]){
arrQueryStrK[i] = [arrQueryStrJ[0], arrQueryStrJ[1]];
if (arrQueryStrK[i][0] == pstrWhich) {return arrQueryStrK[i][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[i][4].toLowerCase();
if (strWindowPathFull == strMenuPath){
strLinkandParents = aMenu[i][0] + ";" + aMenu[i][1] + ";" + aMenu[i][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[i][1]){
objChild = document.getElementById(aMenu[i][0]);
if (objChild.style.display == "none"){
if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][4] == strWinPath)) {strCurrLinkId = aMenu[i][0]; }
if ((aMenu[i][2].length == 0) || (aMenu[i][2] == strCurrLinkId)){
objChild.style.display = "block";
}
}
else{
objChild.style.display = "none";
}
}
else{
if (aMenu[i][1].length > 0 && pobjTag.id != aMenu[i][2]) {
sOther = document.getElementById(aMenu[i][0]);
sOther.style.display = "none";
}
}
}
}

function toggleLevel3(pobjTag) {
var objChild;
for(i=0;i<aMenu.length;i++){
if (pobjTag.id == aMenu[i][2]){
objChild = document.getElementById(aMenu[i][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[i][0].substr(0,2);
strChildImgId = "img" + aMenu[i][0];
objChildImg = document.getElementById(strChildImgId);
if ((aMenu[i][1] == pobjTag.id && strChildLevel == "L2" && aMenu[i][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[i][0] == strMenuItemId){
strMenuItemURL = aMenu[i][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[i][0]
+ "' onmouseout='style.cursor=\"default\"' ";
if (aMenu[i][0]!= strLink){
strMenu = strMenu + "onclick='JavascriptnclickMenuItem(this);' onmouseover='style.cursor=\"pointer\"' ";
}
if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][1] == strL1Parent )){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strLink)){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strL2Parent )){
strMenu = strMenu + " style='display:block' ";
}
else{
strMenu = strMenu + " style='display:none' ";
}

strMenu = strMenu + " ><td valign= 'top' align='center' width=50>&nbsp;";

if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;";
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}

strMenu = strMenu + "<img id='img" + aMenu[i][0] + "' src='"

if ((aMenu[i][0] == strL2Parent) || ((aMenu[i][0] == strLink) && (aMenu[i][0].substr(0,2) == "L2"))){
strMenu = strMenu + imgFolderOpen.src;
}
else if ((strWindowPath.indexOf(strHome) != -1) && (aMenu[i][0]== strLink)){
strMenu = strMenu + imgHomeOff.src;
}
else{
strMenu = strMenu + aMenu[i][5];
}

strMenu = strMenu + "' width='" + aMenu[i][6] + "' height='" + aMenu[i][7]
+ "'/></td><td";

if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + "";
}
else if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + "";
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + "";
}

strMenu = strMenu + ">";

if ((aMenu[i][4].length > 0) && (aMenu[i][0]!= strLink) && (aMenu[i][0].substr(0,2) == "L3")){
strMenu = strMenu + "<a class='links' href='" + aMenu[i][4] + "'>" + aMenu[i][3] + "</a>";
}
else if (aMenu[i][0]== strLink){
strMenu = strMenu +aMenu[i][3];
}
else{
strMenu = strMenu + "<b>" +aMenu[i][3] + "</b>";
}

strMenu = strMenu + "</td></tr>";
}

strMenu = strMenu + "</table></div>";
document.write(strMenu);
}

////////////////////////////////////////

My pages are devided into sections. The below makes the page. index.php
<?php include('inc_top.php'); ?>
<?php include('inc_bottom.php'); ?>

Can somebody ps help me on this...

Thank you
Darkie

[djr33]

Please use a proper title for your threads.