Menu
I have created a very simple menu index.
It works OK with one reference, but not perfect with two.
My attempt was to create two rotating menus. See “More” and “Travel” Links
embedded between the ‘Main Menu #’ displays.
Each time you click on the “More”, for example, a small sub-menu of links
displays that changes (rotates through the total count).
When I alternately click on the “More” and “Travel” links, one or the other seems
to get confused and displays more than one of the rotation selections.
I suspect it has something to do with the “ToggleParamCount’.
I thought I was being smart by having it in part of the JSON definition
but now I’m just confused as to what is happening.
Is there some sort of interaction I’m not accounting for when I create
the references
[code]
var MoreStuff = DisplayToggles;
var TravelStuff = DisplayToggles;
Any suggestions?
[code=php]
<html>
<head>
<title>Mini Menu</title>
<style type=”text/css”>
td {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#003366;
width:200px;
}
.NavMenu { display:none; }
</style>
<script type=”text/javascript”>
stateOn = ‘block’; stateOff = ‘none’;
function ToggleDisplay(ids) {
var CState = document.getElementById(ids);
if ((CState.style.display == stateOff) || (CState.style.display == ”))
{ CState.style.display = stateOn; } else { CState.style.display = stateOff; }
}
var DisplayToggles = {
ToggleParamsCnt : 0,
ToggleParams : function() {
var argv = arguments; // collect parameters in array
var argc = argv.length; // save length of array
var Info = argv[this.ToggleParamsCnt]; // get information for current parameter
var CState = document.getElementById(Info);
if ((CState.style.display == stateOff) || (CState.style.display == ”)) {
CState.style.display = stateOn; // display
} else {
CState.style.display = stateOff; // remove display
this.ToggleParamsCnt = (this.ToggleParamsCnt+1) % argc; // get next parameter in list (modulo max array size)
Info = argv[this.ToggleParamsCnt];
CState = document.getElementById(Info);
if ((CState.style.display == stateOff) || (CState.style.display == ”))
{ CState.style.display = stateOn; } else { CState.style.display = stateOff; }
}
},
ToggleParamsOff : function() {
var argv = arguments; // collect parameters in array
for (var i=0; i<argv.length; i++) { document.getElementById(argv[i]).style.display = stateOff; }
}
}
var MoreStuff = DisplayToggles;
var TravelStuff = DisplayToggles;
</script>
</head>
<body>
<table border=”0″>
<tr> <td>
<a href=”javascript:void(0)” onClick=”ToggleDisplay(‘Menu1’)”>Main Menu 1</a>
<div id=”Menu1″ class=”NavMenu”>
<br />Sub-Menu 1-1
<br />Sub-Menu 1-2
<br />Sub-Menu 1-3
</div>
</td> </tr>
<tr> <td>
<div style=”padding-left:0.5cm”>
<a href=”javascript:void(0)” onClick=”MoreStuff.ToggleParams(‘CV’,’Labs’,’Proj’,’Misc’)”>More</a>
<a href=”javascript:void(0)” onClick=”MoreStuff.ToggleParamsOff(‘CV’,’Labs’,’Proj’,’Misc’)”>Links</a>
<div id=”CV” style=”display:none”>
<br />Curriculum Vitae
<br /><a href=”javascript:void(0)”>Brief</a> &
<a href=”javascript:void(0)”>Extended</a>
<p />Portfolios
<br /><a href=”javascript:void(0)”>Teaching</a> &
<br /><a href=”javascript:void(0)”>Administrative</a> &
<br /><a href=”javascript:void(0)”>Creation</a>
</div>
<div id=”Labs” style=”display:none”>
<br />Labs
<br /><a href=”javascript:void(0)”>Lab 1</a>
<a href=”javascript:void(0)”>Lab 2</a>
<br /><a href=”javascript:void(0)”>Lab 3</a>
<a href=”javascript:void(0)”>Lab 4</a> &
<a href=”javascript:void(0)”>Lab 5</a>
<p />Classes
<br /><a href=”javascript:void(0)”>Class 1</a>
<a href=”javascript:void(0)”>Class 2</a>
<a href=”javascript:void(0)”>Class 3</a>
</div>
<div id=”Proj” style=”display:none”>
<br />Projects
<br /><a href=”javascript:void(0)”>1</a>
<a href=”javascript:void(0)”>2</a>
<a href=”javascript:void(0)”>3</a>
<a href=”javascript:void(0)”>4</a>
<a href=”javascript:void(0)”>5</a>
<p />Simulations
<p />Reference Links
</div>
<div id=”Misc” style=”display:none”>
<br />Web Boards
<p />Surveys
</div>
</div>
</td> </tr>
<tr> <td>
<a href=”javascript:void(0)” onClick=”ToggleDisplay(‘Menu2’)”>Main Menu 2</a>
<div id=”Menu2″ class=”NavMenu”>
<br />Sub-Menu 2-1
<br />Sub-Menu 2-2
<br />Sub-Menu 2-3
</div>
</td> </tr>
<tr><td>
<div style=”padding-left:0.5cm”>
<a href=”javascript:void(0)” onClick=”TravelStuff.ToggleParams(‘Cars’,’Trains’,’Planes’,’Trucks’,’Boats’)”>Travel</a>
<a href=”javascript:void(0)” onClick=”TravelStuff.ToggleParamsOff(‘Cars’,’Trains’,’Planes’,’Trucks’,’Boats’)”>Links</a>
<div id=”Cars” style=”display:none”>
<br />GM
<p />Ford
<p />Chrysler
<p />Honda
<p />Toyota
</div>
<div id=”Trains” style=”display:none”>
<br />Steam
<br />Electric
<br />Diesel
</div>
<div id=”Planes” style=”display:none”>
<br />Model
<br />Private
<br />Commercial
<br />Military
</div>
<div id=”Trucks” style=”display:none”>
<br />Small
<br />Medium
<br />Large
</div>
<div id=”Boats” style=”display:none”>
<br />Row
<br />Sail
<br />Speed
<br />Yacht
<br />Cruiser
<br />Pleasure
</div>
</div>
</td></tr>
<tr> <td>
<a href=”javascript:void(0)” onClick=”ToggleDisplay(‘Menu3’)”>Main Menu 3</a>
<div id=”Menu3″ class=”NavMenu”>
<br />Sub-Menu 3-1
<br />Sub-Menu 3-2
<br />Sub-Menu 3-3
</div>
</td> </tr>
</table>
</body>
</html>