wiggout Posted September 16, 2011 Share Posted September 16, 2011 I am trying to save the state of a tree menu by storing the name of the open section in a cookie, and then reading the cookie onload. It seems to be going to the href url before writing to the cookie. Below is my code and some examples of where the functions are used in my page. Thanks in advance for you help. <body id="body" onload="getMenuState()"> <a href="/" onclick="setMenuState('none');">Home</a> <li class="nav" onmouseover="mOvr1(this);" onmouseout="mOut1(this);" onclick="setMenuState('sectionLinks_1')"> <a href="/Security-Camera-Systems-s/19.htm" >Security Cameras</a></li> function setMenuState(targetId){ for(var i=1;i<=4;i++) {document.getElementById('sectionLinks_'+i).style.display="none";} {document.cookie="openMenu="+targetId;}}function getMenuState(){ var search = "openMenu="; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) // if cookie exists if (offset != -1) { offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1){end = document.cookie.length;} value = unescape(document.cookie.substring(offset, end)); if(value != "none"){document.getElementById(value).style.display="block";} } }} Link to comment Share on other sites More sharing options...
Ingolme Posted September 16, 2011 Share Posted September 16, 2011 I think you need to rethink this. The first thing is to separate the cookie logic from the menu logic. Cookie logic => setCookie() getCookie()Menu logic => openBranch() closeBranch()In-between => saveMenuConfiguration() loadMenuConfiguration() The cookie methods should be obvious: They load data from a cookie and save data to a cookie. The W3Schools Javascript tutorial has these methods done for you.The menu methods work as follows: openBranch() is a method that takes a parameter that's a reference to the element to open and changes its display property to "block" closeBranch() take a reference to the element and changes its property to "none The in-between methods relate the menu methods with the cookie methods. saveMenuConfiguration() sets the cookie with the values that the menu currently has. This method should be called every time the menu changes. loadMenuConfiguration() loads the data from the cookie and sets all the menus with the states observed in the cookie. This method is called when the page is loaded. Link to comment Share on other sites More sharing options...
wiggout Posted September 19, 2011 Author Share Posted September 19, 2011 Thanks for responding. I broke it down into the functions you described. It still works the same, but it makes more sense the way you broke it down. Anyways, it is still not functioning the way I would like it to. Each main nav is also a link. I don't want it to change the state of the menu until after it has gone to the new page. It sets the cookie and loads the page, but the subnav does not expand until I either click that main nav again or I click on a different main nav. Thanks again for your help. Body: <body id="body" onload="loadMenuConfiguration()"> Main nav: <li class="nav" onmouseover="mOvr1(this);" onmouseout="mOut1(this);" onclick="saveMenuConfiguration('sectionLinks_1'); mClk2(this);"> <a href="/Security-Cameras-s/13.htm" onclick="return false;">Security Cameras</a></li> <ul id="sectionLinks_1" style="display:none; cursor: pointer;"> Javascript: function mClk2(src, popup) {if (!popup) {window.location=src.getElementsByTagName('A')[0].getAttribute('href');} else {window.open(src);} } function setCookie(targetId){ var section="sectionLinks_"; for(var i=1;i<=4;i++) { if((section+i) == targetId){document.cookie=section+i+"=block";} else{document.cookie=section+i+"=none";} }}function getCookie(targetId){ var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==targetId) { return unescape(y); } }}function openBranch(targetId){ document.getElementById(targetId).style.display="block";}function closeBranch(targetId){ document.getElementById(targetId).style.display="none";}function saveMenuConfiguration(targetId){ setCookie(targetId);}function loadMenuConfiguration(){ var section="sectionLinks_"; for(var i=1;i<=4;i++) { menuState = getCookie(section+i); if(menuState == "block"){openBranch(section+i);} else{closeBranch(section+i);} }} Link to comment Share on other sites More sharing options...
Ingolme Posted September 19, 2011 Share Posted September 19, 2011 You've got it a bit mixed up. The setCookie and getCookie methods are the same ones as used here: http://www.w3schools.../js_cookies.asp The saveMenuConfiguration should be saving all the menu data in a format that can be decoded later. Here's one example: setCookie("menu","1:block|2:none|3:none|4:block",30); // Obviously, the string used in the second parameter is generated automatically based on the states of the menu Though you could do it the other way too: setCookie("sectionLinks_1","block",30); setCookie("sectionLinks_2","none",30);setCookie("sectionLinks_3","none",30);setCookie("sectionLinks_4","block",30); The saveMenuConfiguration() method should be called and the end of the openBranch and closeBranch methods. Link to comment Share on other sites More sharing options...
wiggout Posted September 19, 2011 Author Share Posted September 19, 2011 Thanks! It is working now. I also had to set "path=/". Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.