View Full Version : Local Persistence in Switch Menu Acting Flakey

07-14-2010, 07:29 PM
1) Script Title: Switch Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

3) Describe problem: Have been using the Switch Menu script for three years now with excellent results. In my past applications I had the persistence feature activated sitewide. I currently have a new application in which I would like to have the persistence active locally. When I test it though the persistence only takes affect after I have selected a submenu item for the second time. For example, the first time I select a submenu item it directs me to the linked page but the menu collapses. I reopen the menu and select the same submenu item and the tree correctly stays open. My applicable code is below. Unfortunately, I cannot post a URL of the example since the application is within a electronic catalog which is installed into a kitchen and bath design program called 20-20 Design. Any assistance would be greatly appreciated.

<style type="text/css">
margin-bottom: 5px;
/*/*/border:2px solid #000000;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 0.5em;
color: #040006;
font-size: 10px;

<script type="text/javascript">

* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')

function SwitchMenu(obj){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
el.style.display = "block";
el.style.display = "none";

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 onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid

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

if (persistmenu=="yes" && document.getElementById)

<style type="text/css">
body {
background-color: #FFFFFF;
margin-top: 0px;
.style2 {color: #700072}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
color: #000000;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;

<!-- Keep all menus within masterdiv-->
<table width="746" border="0" cellpadding="4">
<td width="170" valign="top">
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">Silver Toned Finish </div>
<span class="submenu" id="sub1">
- <a href="hardware_pages/aged_pewter_826.html" target="main">Aged Pewter</a><br>
- <a href="hardware_pages/anodized_aluminum_826.html" target="main">Anodized Aluminum</a><br>
- <a href="hardware_pages/antique_nickel_826.html" target="main">Antique Nickel</a><br>
- <a href="hardware_pages/matt_nickel_826.html" target="main">Matt Nickel</a><br>
- <a href="hardware_pages/pewter_826.html" target="main">Pewter</a><br>
- <a href="hardware_pages/polished_chrome_826.html" target="main">Polished Chrome</a><br>
- <a href="hardware_pages/polished_nickel_826.html" target="main">Polished Nickel</a><br>
- <a href="hardware_pages/satin_nickel_826.html" target="main">Satin Nickel</a><br>
- <a href="hardware_pages/sterling_nickel_826.html" target="main">Sterling Nickel</a><br>
- <a href="hardware_pages/stainless_steel_826.html" target="main">Stainless Steel</a><br>
- <a href="hardware_pages/weathered_nickel_826.html" target="main">Weathered Nickel</a><br>
- <a href="hardware_pages/weathered_nickel_copper_826.html" target="main">Weathered Nickel Copper</a><br>

<div class="menutitle" onclick="SwitchMenu('sub2')">Gold Toned Finish </div>
<span class="submenu" id="sub2">
- <a href="hardware_pages/burnished_brass_826.html" target="main">Burnished Brass</a><br>
- <a href="hardware_pages/distressed_brass_826.html" target="main">Distressed Brass</a><br>
- <a href="hardware_pages/guilded_bronze_826.html" target="main">Guilded Bronze</a><br>
- <a href="hardware_pages/rustic_bronze_826.html" target="main">Rustic Bronze</a><br>

<div class="menutitle" onclick="SwitchMenu('sub3')">Dark Toned Finish </div>
<span class="submenu" id="sub3">
- <a href="hardware_pages/antique_rust_826.html" target="main">Antique Rust</a><br>
- <a href="hardware_pages/black_bronze_826.html" target="main">Black Bronze</a><br>
- <a href="hardware_pages/dark_oiled_bronze_826.html" target="main">Dark Oiled Bronze</a><br>
- <a href="hardware_pages/flat_black_826.html" target="main">Flat Black</a><br>
- <a href="hardware_pages/graphite_826.html" target="main">Graphite</a><br>
- <a href="hardware_pages/oil_rubbed_bronze_826.html" target="main">Oil Rubbed Bronze</a><br>
- <a href="hardware_pages/roman_bronze_826.html" target="main">Roman Bronze</a><br>
- <a href="hardware_pages/wrought_iron_826.html" target="main">Wrought Iron</a><br>

<div class="menutitle" onclick="SwitchMenu('sub4')">Miscellaneous</div>
<span class="submenu" id="sub4">
- <a href="hardware_pages/acrylic_826.html" target="main">Acrylic</a><br>
- <a href="hardware_pages/frosted_acrylic_826.html" target="main">Frosted Acrylic</a><br>
- <a href="hardware_pages/wood_826.html" target="main">Wood</a><br>
</span> </div> </td>

<td width="500" align="center" valign="baseline"><img src="Innermost-Splash-Hardware.jpg" width="500" height="500" /></td>