Persist state on accordian glossy menu

1) Script Title: Glossy Menu Accordian

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm

3) Describe problem: I have set up teeh accordian menu and it is working perfectly in FF and IE7. IE6 however is not maintaining the Persist State. in other words I can click and open the menu structure, however when I select one of the submenu items the page refreshes and my menu is closed again. meaning I have to click to open it again to select another page. Very annoying.

Any ideas on why IE6 would be behaving this way.

Forgot to mention, I am using the standard code with no moderations and I am unable to post a page showing teh problem as it is being developed on an internal server not open to the world.

Check to see the persistent cookie is being set when the page unloads. Find the below code inside the .js file, and add to it the part in red:

Code:

---

                        if (config.persiststate==true){ //persist state?
                                expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
                                alert(expandedindices)

---

Once you've done that, expand a header in IE6, and reload the page to trigger a page unonload- you should get a value other than -1c to indicate a header is expanded and should be persisted. Do you get that, yet the persisted header isn't automatically expanded upon the page reload?

Thanks for that. I added that code snippet into the .js file. I reloaded the page. Upon opening a menu to expose the submenu all is well. Selecting a submenu item causes an alert box stating 0c to appear. I hit ok and another alert box stating -1c appears. The page reloads the submenu page selected but the menu is closed again. The persisted header isn't automatically expanded upon the page reload.

Actually, don't click any the sub menu item. With the change in red above implemented, do this:

1) Click on a header to expand its sub menu contents
2) Reload page, and remember the value that gets alerted (ie: 0c)
3) Once the page has finished reloading, does the previously expanded header stay expanded?

Post the results of the above. You should be on the same page at all times.

Open menu header > refresh page > 0c appears > hit OK > -1c appears > hit OK > page finishes reloading menu Header now closed.

it did not Persist.

That still doesn't sound right actually (the experiment that is). You should only get 1 alert total, since the alert() message in red I had said to add to the code is only executed when the page unloads, which only happens once throughout, right after you've pressed reload. "-1c" should not have been alerted. Verify you added the line in red above to the exact location specified above.

All this would be a lot simpler if there was a page online we could check out.

Thanks it is strange i know. I have had to make the site live this morning anyway so you can check it yourself at www.foodstuffs-si.co.nz/new/index.asp

If you goto the new dir you will find the site again but with your javascript modification. remember you must view this in IE6 to see the problem.

The alert script you told me to enter has been entered.

Any luck?

This may or may not help with the present issue, but inside menu.js on your site (http://www.foodstuffs-si.co.nz/new/menu.js), you should remove the redundant/ erroneous second initialization call:

Code:

---

ddaccordion.init({
        headerclass: "subsubmenuheader", //Shared CSS class name of headers group
        contentclass: "submenu2", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
        defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["suffix", "<img src='images/plus2.gif' class='statusicon2' />", "<img src='images/minus2.gif' class='statusicon2' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                //do nothing
        }
})

---

It's redundant because the HTML for the menu above on your page appears commented out. To be safe, you should remove that HTML as well. That's why you were getting two alert messages btw.

The extra initialisation is because I need to create a second level accordian menu within the first as the level. I did not see another way of doing it. If you have a better way please feel free to enlighten me as I am useless when it comes to javascript.

explains the two alerts.

Still though when viewed in IE6 without the erroneous code the menu does not persist when clicking a sub menu item.

Any more ideas?

Ok, I tried saving a local copy of your page, and ran some more tests in IE6. Now, this could be due to my specific copy of IE6, which is a development copy (part of multiple IE versions on the same PC), but in that browser, it's simply not allowing any cookie to be set, period. To confirm if that's in fact the issue for you as well, replace the alert() message you had added in red with the below in red instead:

Code:

---

                                expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
                                document.cookie="mycookie=success;"
                                alert(document.cookie)

---

Now reload the page- do you get the value "mycookie=success;" alerted?

OK in FF3 i get an alert box that says success. In IE6 I get a blank alert box appear. No text showing at all. In IE7 I get success shown.

That's the problem then- in IE6, at least your copy and mine (which isn't fully standalone btw), cookies are being rejected period. Try and check your browser settings to see if you have cookies disabled in IE6.

aha, we getting there. I have checked the settings on my IE6 and set the security to low and added the site as a trusted site. IE6 is still not keeping the menu open.

Is there somewhere I can view the cookies that IE6 has accepted to see if there is one there??