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

[alpha_foobar]

Hi, you want the user to go to the page they select right?

When the user goes to the next page, your page is reloaded, there are only 3 solutions I can think of for your problem. And this is a design problem, not a Javascript problem as such.

1. Record the navigation path - If it is just keeping menus open, then you could use a PHP routine to display the page and the parent pages. Or you could use breadcrumbs (which record the path).
2. Pass the menu options through as a parameter (either as variables drawn by PHP or variables extracted by Javascript... doing it with PHP is tidier). Then the Javascript will know which menu to open.
3. Don't reload the page at all, use AJAX and DHTML to draw the contents of the page in a div element on your page - then your complete page won't be reloaded.

The last solution assumes all your users can use AJAX, but if your menu is using JavaScript then you are already assuming modern browsers, or are already considering how to allow older clients access to your site.

Cheers,
Alpha

[darkie_99]

Hi alpha_foobar

Thank you very much for your advise. I thank you for your time & efforts to provide a solution to my problem.

I will redesign my pages and see if this will work.

Thanks you :-)
Darkie

[darkie_99]

Can you please make me an example of the below point?

1. Pass the menu options through as a parameter (either as variables drawn by PHP or variables extracted by Javascript... doing it with PHP is tidier). Then the Javascript will know which menu to open.

Im still confused here...

[alpha_foobar]

Hi,
You could either add the parameters you want to post in the URL, like for this page: newreply.php?do=newreply&noquote=1&p=438334 Notice that the page has a ? and then a couple of parameters in the form name=value, they are terminated with the & character.

Thats one way to pass parameters that you can extract in your PHP page. Another way is to create a form and use the link to send the form, but thats more complicated.

Cheers,
Alpha

[darkie_99]

Thank you very much for ur response.

I appreciate it.