JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Questions about Javascipt Menu

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jan 2006
Posts: 4
Reputation: darkie_99 is an unknown quantity at this point 
Solved Threads: 0
darkie_99 darkie_99 is offline Offline
Newbie Poster

Questions about Javascipt Menu

 
0
  #1
Sep 20th, 2007
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var nIndex=0 ;
  2. var aMenu=new Array(); 
  3. var Menu = new Array();
  4. // Pre load images - defined order should stay as is for proper functionality;
  5. if (document.images)
  6. {
  7.  
  8. imgFolderOpen = new Image(18, 18);
  9. imgFolderOpen.src = "/wmis/images/open1.gif";
  10.  
  11. imgFolderClosed = new Image(18, 18);
  12. imgFolderClosed.src = "/wmis/images/closed1.gif";
  13.  
  14. imgPageNode = new Image(18, 18);
  15. imgPageNode.src = "/wmis/images/list.gif";
  16.  
  17. }
  18. function getMenu(pSection){
  19.  
  20. switch(getQueryStringValue('menu')){ 
  21. default : 
  22. addMenu(Menu=["L1_Current", "", "", "Current", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
  23. addMenu(Menu=["L2_Admin", "L1_Current", "", "Admin functions", "", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
  24. addMenu(Menu=["L3_year", "L1_Current", "L2_Admin", "Capture Year", "capture_year.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
  25. addMenu(Menu=["L3_assignuser", "L1_Current", "L2_Admin", "Assign User", "assignuser.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
  26. addMenu(Menu=["L1_History", "", "", "History", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
  27. addMenu(Menu=["L2_workplan_h", "L1_History", "", "Workplan", "searchbyyear.php", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
  28. addMenu(Menu=["L3_SG_h", "L1_History", "L2_workplan_h", "SG Workplan", "sg_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
  29. addMenu(Menu=["L3_PW_h", "L1_History", "L2_workplan_h", "Personal Workplan", "p_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]);
  30.  
  31. addMenu(Menu=["L1_logout", "", "", "Logout", "logout.php" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
  32. addMenu(Menu=["L1_help", "", "", "Help", "" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
  33. break; 
  34. }
  35. }
  36.  
  37. function getQueryStringValue(pstrWhich){
  38.  
  39. var strQueryStr = window.location.search.substr(1);
  40. var arrQueryStrI = strQueryStr.split("&");
  41. var arrQueryStrJ;
  42. var arrQueryStrK = new Array();
  43.  
  44. for(i=0; i < arrQueryStrI.length; i++){
  45. arrQueryStrJ = arrQueryStrI[i].split("=");
  46. if (arrQueryStrJ[0]){
  47. arrQueryStrK[i] = [arrQueryStrJ[0], arrQueryStrJ[1]];
  48. if (arrQueryStrK[i][0] == pstrWhich) {return arrQueryStrK[i][1]}; 
  49. }
  50. }
  51.  
  52. }
  53.  
  54.  
  55.  
  56. function getLinkandParents(){
  57. var strWindowPathFull = window.location.pathname + window.location.search;
  58. var strMenuPath = "";
  59. var strLinkandParents = "";
  60. strWindowPathFull = strWindowPathFull.toLowerCase();
  61.  
  62. for (i=0;i<aMenu.length;i++){
  63. strMenuPath = aMenu[i][4].toLowerCase();
  64. if (strWindowPathFull == strMenuPath){
  65. strLinkandParents = aMenu[i][0] + ";" + aMenu[i][1] + ";" + aMenu[i][2];
  66. }
  67. }
  68.  
  69. return strLinkandParents;
  70. }
  71.  
  72. function addMenu(pArray){
  73. aMenu[nIndex] = pArray; nIndex++
  74. }
  75.  
  76. function toggleLevel2(pobjTag) {
  77. var objChild; var objOther; var strWinPath; var strCurrLinkId;
  78. strWinPath = window.location.pathname + window.location.search;
  79. for(i=0;i<aMenu.length;i++){
  80. if (pobjTag.id == aMenu[i][1]){
  81. objChild = document.getElementById(aMenu[i][0]);
  82. if (objChild.style.display == "none"){
  83. if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][4] == strWinPath)) {strCurrLinkId = aMenu[i][0]; }
  84. if ((aMenu[i][2].length == 0) || (aMenu[i][2] == strCurrLinkId)){
  85. objChild.style.display = "block";
  86. }
  87. }
  88. else{
  89. objChild.style.display = "none";
  90. }
  91. }
  92. else{
  93. if (aMenu[i][1].length > 0 && pobjTag.id != aMenu[i][2]) {
  94. sOther = document.getElementById(aMenu[i][0]);
  95. sOther.style.display = "none";
  96. }
  97. }
  98. }
  99. }
  100.  
  101. function toggleLevel3(pobjTag) {
  102. var objChild; 
  103. for(i=0;i<aMenu.length;i++){
  104. if (pobjTag.id == aMenu[i][2]){
  105. objChild = document.getElementById(aMenu[i][0]);
  106. if (objChild.style.display == "none"){
  107. objChild.style.display = "block";
  108. }
  109. else{
  110. objChild.style.display = "none";
  111. }
  112. }
  113. }
  114. }
  115.  
  116. function swapImgLevel2(pobjTag, pstrLevelFrom){
  117. if (pstrLevelFrom == "L1"){
  118. var strChildImgId; var objChildImg; var strChildId; var strChildLevel; 
  119. var strWinPath = window.location.pathname + window.location.search;
  120. for (i=0;i<aMenu.length;i++){
  121. strChildLevel = aMenu[i][0].substr(0,2);
  122. strChildImgId = "img" + aMenu[i][0]; 
  123. objChildImg = document.getElementById(strChildImgId);
  124. if ((aMenu[i][1] == pobjTag.id && strChildLevel == "L2" && aMenu[i][4] != strWinPath) && (objChildImg.src != imgPageNode.src)){
  125. objChildImg.src = imgFolderClosed.src;
  126. }
  127. }
  128. }
  129. if (pstrLevelFrom == "L1"){
  130. var strImgId = "img" + pobjTag.id ; var objImg;
  131. objImg = document.getElementById(strImgId);
  132. if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
  133. else objImg.src = imgFolderClosed.src;
  134. }
  135. if (pstrLevelFrom == "L2"){
  136. var strImgId = "img" + pobjTag.id ; var objImg;
  137. objImg = document.getElementById(strImgId);
  138. if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
  139. else objImg.src = imgFolderClosed.src;
  140. }
  141. }
  142.  
  143. function toggleChildren(pobjTag){
  144. var strLevel;
  145. strLevel = pobjTag.id.substr(0,2); 
  146. if (strLevel == "L1"){
  147. swapImgLevel2(pobjTag,"L1");
  148. toggleLevel2(pobjTag);
  149. }
  150. if (strLevel == "L2"){
  151. swapImgLevel2(pobjTag,"L2");
  152. toggleLevel3(pobjTag);
  153. }
  154. }
  155.  
  156. function onclickMenuItem(pobjTag){
  157. var strMenuItemId = pobjTag.id;
  158. var strMenuItemURL = "";
  159. for (i=0;i<aMenu.length;i++){
  160. if (aMenu[i][0] == strMenuItemId){
  161. strMenuItemURL = aMenu[i][4];
  162. }
  163. }
  164.  
  165. if (strMenuItemURL.length > 0){
  166. self.location.replace(strMenuItemURL);
  167. }
  168. else{
  169. toggleChildren(pobjTag);
  170. }
  171. }
  172.  
  173. function buildMenu(pstrSection){
  174. var arrLinkandParents;
  175. var strHome = "default";
  176. var strMenu;
  177. var strLink="";
  178. var strL1Parent="";
  179. var strL2Parent="";
  180. var strWindowPath = window.location.pathname;
  181. strWindowPath = strWindowPath.toLowerCase();
  182. getMenu();
  183. var strLinkandParents = getLinkandParents(pstrSection);
  184.  
  185. if (strLinkandParents.length > 0) {
  186. arrLinkandParents = strLinkandParents.split(";"); 
  187. var strLink = arrLinkandParents[0]; 
  188. var strL1Parent = arrLinkandParents[1]; 
  189. var strL2Parent = arrLinkandParents[2]; 
  190. }
  191.  
  192. strMenu = "<DIV id='menudiv'><table border=0>" ;
  193. for (i=0;i<aMenu.length;i++){
  194. strMenu = strMenu + "<tr id='" + aMenu[i][0] 
  195. + "' onmouseout='style.cursor=\"default\"' ";
  196. if (aMenu[i][0]!= strLink){
  197. strMenu = strMenu + "onclick='JavascriptnclickMenuItem(this);' onmouseover='style.cursor=\"pointer\"' ";
  198. } 
  199. if (aMenu[i][0].substr(0,2) == "L1"){
  200. strMenu = strMenu + " style='display:block' "; 
  201. }
  202. else if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][1] == strL1Parent )){
  203. strMenu = strMenu + " style='display:block' ";
  204. }
  205. else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strLink)){
  206. strMenu = strMenu + " style='display:block' ";
  207. }
  208. else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strL2Parent )){
  209. strMenu = strMenu + " style='display:block' "; 
  210. }
  211. else{
  212. strMenu = strMenu + " style='display:none' "; 
  213. }
  214.  
  215. strMenu = strMenu + " ><td valign= 'top' align='center' width=50>&nbsp;";
  216.  
  217. if (aMenu[i][0].substr(0,2) == "L2"){
  218. strMenu = strMenu + "&nbsp;&nbsp;&nbsp;";
  219. }
  220. else if (aMenu[i][0].substr(0,2) == "L3"){
  221. strMenu = strMenu + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
  222. } 
  223.  
  224. strMenu = strMenu + "<img id='img" + aMenu[i][0] + "' src='" 
  225.  
  226. if ((aMenu[i][0] == strL2Parent) || ((aMenu[i][0] == strLink) && (aMenu[i][0].substr(0,2) == "L2"))){
  227. strMenu = strMenu + imgFolderOpen.src;
  228. }
  229. else if ((strWindowPath.indexOf(strHome) != -1) && (aMenu[i][0]== strLink)){ 
  230. strMenu = strMenu + imgHomeOff.src;
  231. }
  232. else{
  233. strMenu = strMenu + aMenu[i][5];
  234. } 
  235.  
  236. strMenu = strMenu + "' width='" + aMenu[i][6] + "' height='" + aMenu[i][7] 
  237. + "'/></td><td"; 
  238.  
  239. if (aMenu[i][0].substr(0,2) == "L1"){
  240. strMenu = strMenu + "";
  241. }
  242. else if (aMenu[i][0].substr(0,2) == "L2"){
  243. strMenu = strMenu + ""; 
  244. }
  245. else if (aMenu[i][0].substr(0,2) == "L3"){
  246. strMenu = strMenu + ""; 
  247. }
  248.  
  249. strMenu = strMenu + ">";
  250.  
  251. if ((aMenu[i][4].length > 0) && (aMenu[i][0]!= strLink) && (aMenu[i][0].substr(0,2) == "L3")){ 
  252. strMenu = strMenu + "<a class='links' href='" + aMenu[i][4] + "'>" + aMenu[i][3] + "</a>";
  253. } 
  254. else if (aMenu[i][0]== strLink){
  255. strMenu = strMenu +aMenu[i][3];
  256. }
  257. else{ 
  258. strMenu = strMenu + "<b>" +aMenu[i][3] + "</b>";
  259. }
  260.  
  261. strMenu = strMenu + "</td></tr>"; 
  262. } 
  263.  
  264. strMenu = strMenu + "</table></div>"; 
  265. document.write(strMenu);
  266. }

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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Questions about Javascipt Menu

 
0
  #2
Sep 20th, 2007
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
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2006
Posts: 4
Reputation: darkie_99 is an unknown quantity at this point 
Solved Threads: 0
darkie_99 darkie_99 is offline Offline
Newbie Poster

Re: Questions about Javascipt Menu

 
0
  #3
Sep 21st, 2007
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2006
Posts: 4
Reputation: darkie_99 is an unknown quantity at this point 
Solved Threads: 0
darkie_99 darkie_99 is offline Offline
Newbie Poster

Re: Questions about Javascipt Menu

 
0
  #4
Sep 21st, 2007
•
•
•
•
Originally Posted by alpha_foobar View Post
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
Can you please make me an example of the below point?
[QUOTE}
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.

[/QUOTE]
Im still confused here...
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Questions about Javascipt Menu

 
0
  #5
Sep 22nd, 2007
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
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2006
Posts: 4
Reputation: darkie_99 is an unknown quantity at this point 
Solved Threads: 0
darkie_99 darkie_99 is offline Offline
Newbie Poster

Re: Questions about Javascipt Menu

 
0
  #6
Sep 25th, 2007
Thank you very much for ur response.

I appreciate it.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC