How Do I make Collapsible Menu SAVE STATE

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:13

How Do I make Collapsible Menu SAVE STATE

Poster: RegGFX
Dated: Thursday February 23 2006 - 17:52:04 GMT

Ok... i love the Collapsible Menu located at http://www.milonic.com/treemenu/

But ONE BIG QUESTION OF THE DAY...
In my brief quick look and study of this menu I have people requestiong to make it SAVE STATE when it gets to the next html page.

What it does now is COLLAPSE when you go to the next page.
Is there some kind of way to make it NOT shut back, but stay open when you visit a page? I know you could do this if you use frameset... but that is not an option for what i've been asked to do.

Perhaps this could be accomplished by COOKIES?,Onload being called or something?

Please RSVP

Poster: Andy
Dated: Friday February 24 2006 - 19:44:46 GMT

Hi,

If you are using links to navigate the treemenu (I guess you are) you can probbly just tag the openmenusbyurl.js module to your HTML.

This needs to go just after your menu_data.js call like this:

Code:

The link for the module is: http://www.milonic.com/openmenusbyurl.js

Hope this helps,
Andy

Poster: Goldfish
Dated: Monday April 10 2006 - 13:09:03 BST

Andy, I'm a little confused, I need the same lack of collaspe to happen when the page is directed to another. In the case of the collapsable tree menu, rather than inserting the call just after menu_data.js, did you mean collapse_data.js, or treemenu.js? At the moment, I have the openmenusbyurl.js call in between and it does not work. The actual menu is good, if a little slow to react to mouseover changes. Another odd thing that happens when configuring the setup of the font, color etc, is one has to quit/restart ones browser to view the changes made! However, a small price topay for the end result.

As a result of the posting after this one, I've tried the new version of treemenu.js and putting the call for openmenusbyurl.js AFTER treemenu.js. However, I still wait to witness it working.

Save State for Menu

Poster: RegGFX
Dated: Wednesday May 3 2006 - 0:16:40 BST

Yes... I have the same concerns... I'm still having trouble initiating a save state for this type of menu. It would be an enhancement that would be greatly appreciated.

Any other ideas or suggestions? :?:

Poster: RegGFX
Dated: Thursday May 4 2006 - 16:47:16 BST

I've found some rather interesting code example where a save state is being accomplished... the only trouble is i'm unsuccessful in trying to blend it into the Milonic Code :oops:

If someone or anyone at Milonic could take a look and try something similar I'm sure a similar save state could be achieved using the sample code below:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Savestate example</title>
<!-- ***NOTE*** All Code Below is Presented for educational and example purposes so that we may somehow achieve a similar save state feature to the Milonic Collapsible Menu (WHICH IS A FANTASTIC MENU.. It just doesn't save its state on a page. -->
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>

<script type="text/javascript">
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////
/// Notice how the cookie below mimics a save state ////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>
<script type="text/javascript">

//persistence feature add-on

var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab
document.cookie=cookiename+"="+cookievalue
}

window.onunload=savetabstate
</script>
</head>

<body>
<!-- The Code below sets up Number of TABS -->
<ul id="tablist">
<li><a href="#" class="current" onClick="return expandcontent('sc1', this)">Example 1</a></li>
<li><a href="#" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">Example 2</a></li>
<li><a href="#" onClick="return expandcontent('sc3', this)" theme="#DFFFDF">Example 3</a></li>
</ul>
<!-- END Tab Number Set Up -->

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
<!-- TAB 1 Nested TABLE LOOK AND FEEL LAYOUT STARTS HERE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Example 1 </td>
  </tr>
</table>

<!-- Nested TABLE LOOK AND FEEL LAYOUT ENDS HERE -->
</div>

<div id="sc2" class="tabcontent">
<!--TAB 2 Nested TABLE LOOK AND FEEL LAYOUT STARTS HERE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Example 2 NOTE: Refresh your browser and notice how the Div tab remains in a saved state.</td>
  </tr>
</table>
<!-- Nested TABLE LOOK AND FEEL LAYOUT STARTS HERE -->
</div>

<div id="sc3" class="tabcontent">

<!-- TAB 3 Nested TABLE LOOK AND FEEL LAYOUT STARTS HERE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Example 3 NOTE: Refresh your browser and notice how the Div tab remains in a saved state.</td>
  </tr>
</table>
<!-- TAB 3 Nested TABLE LOOK AND FEEL LAYOUT ENDS HERE -->
</div>
</DIV>

</body>
</html>

Does this stimulate and Ideas?

Industrial Strength JavaScript and DHTML Menus

How Do I make Collapsible Menu SAVE STATE

Save State for Menu