943,958 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Questions about Javascipt Menu
Ad:
Permalink
Sep 20th, 2007
0

Questions about Javascipt Menu

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
darkie_99 is offline Offline
4 posts
since Jan 2006
Permalink
Sep 20th, 2007
0

Re: Questions about Javascipt Menu

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
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Permalink
Sep 21st, 2007
0

Re: Questions about Javascipt Menu

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
darkie_99 is offline Offline
4 posts
since Jan 2006
Permalink
Sep 21st, 2007
0

Re: Questions about Javascipt Menu

Click to Expand / Collapse  Quote originally posted by 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
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...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
darkie_99 is offline Offline
4 posts
since Jan 2006
Permalink
Sep 22nd, 2007
0

Re: Questions about Javascipt Menu

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
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Permalink
Sep 25th, 2007
0

Re: Questions about Javascipt Menu

Thank you very much for ur response.

I appreciate it.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
darkie_99 is offline Offline
4 posts
since Jan 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: how i m putting java script in my blog
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Thumbnail Viewer and drag and drop script





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC