Jump to content
Sign in to follow this  
wiggout

Saving Menu State

Recommended Posts

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";}	 }  }} 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);}    }}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...