PDA

View Full Version : Please help with an old switch menu script



Manny
08-29-2006, 12:30 PM
1) Script Title: Switch Menu

2) Script URL (on DD): The new scripts URL is http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm but I'm using an older version as it's easier to understand and nearly does what I need it to do.

3) Describe problem:

I think I might have posted this in the wrong place before - Sorry.

I found a switch menu script on Dynamic Drive quite a while ago. I've come to use it but have a slight problem that I can't resolve.

Basically, the switch menu works fine apart from the fact that the menu collapses each time a page is reloaded. I wanted to know if there was any way I could start with the menu collapsed but as a user makes his/her selection from the menu, when the next page is loaded, the menu starts from where the user left off - ie, if category 1/subcategory 2 was chosen from the example below, when the next page loaded, options in category 1 were still visible (as the menu will appear on every page).


<html>
<head>
<title>Homepage</title>

<script type="text/javascript">

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

function Button(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="menu2")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>


<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
***********************************************/

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


function SwitchMenu(obj){
if(document.getElementById){
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";
}else{
el.style.display = "none";
}
}
}

</script>
</head>

<body valign="top" leftmargin="2" topmargin="0" marginwidth="0" marginheight="0">

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="150" align="left">

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<a href="../main/index.asp">Home</a>

<div onclick="SwitchMenu('sub0')">Category 1</div>
<span class="submenu" id="sub0">
<a href="products.asp?C=1&S=1">>> Subcategory 1/1</a><br>
<a href="products.asp?C=1&S=2">>> Subcategory 1/2</a><br>
<a href="products.asp?C=1&S=3">>> Subcategory 1/3</a><br>
<a href="products.asp?C=1&S=4">>> Subcategory 1/4</a><br>
<a href="products.asp?C=1&S=5">>> Subcategory 1/5</a><br>
</span>

<div onclick="SwitchMenu('sub1')">Category 2</div>
<span class="submenu" id="sub1">
<a href="products.asp?C=2&S=1">>> Subcategory 2/1</a><br>
<a href="products.asp?C=2&S=2">>> Subcategory 2/2</a><br>
<a href="products.asp?C=2&S=3">>> Subcategory 2/3</a><br>
</span>


<div onclick="SwitchMenu('sub2')">Category 3</div>
<span class="submenu" id="sub2">
<a href="products.asp?C=3&S=1">>> Subcategory 3/1</a><br>
<a href="products.asp?C=3&S=2">>> Subcategory 3/2</a><br>
<a href="products.asp?C=3&S=3">>> Subcategory 3/3</a><br>
<a href="products.asp?C=3&S=4">>> Subcategory 3/4</a><br>
</span>

<div onclick="SwitchMenu('sub3')">Category 4</div>
<span class="submenu" id="sub3">
<a href="products.asp?C=4&S=1">>> Subcategory 4/1</a><br>
<a href="products.asp?C=4&S=2">>> Subcategory 4/2</a><br>
</span>

<div onclick="SwitchMenu('sub4')">Category 5</div>
<span class="submenu" id="sub4">
<a href="products.asp?C=5&S=1">>> Subcategory 5/1</a><br>
<a href="products.asp?C=5&S=2">>> Subcategory 5/2</a><br>
<a href="products.asp?C=5&S=3">>> Subcategory 5/3</a><br>
</span>

</td>
<td align="center" Valign="top">

CONTENT WILL APPEAR HERE

</td>
</tr>
</table>

</body>
</html>

Any help will be greatly appreciated.

Regards,

Manny

jscheuer1
08-29-2006, 05:36 PM
You can simply use the new script without its style with your current markup but, sub0 can no longer be used (subs must be greater than 0). In other words:


<html>
<head>
<title>Homepage</title>

<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')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
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";
}else{
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!="")
document.getElementById(cookievalue).style.display="block"
}
}

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

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

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body valign="top" leftmargin="2" topmargin="0" marginwidth="0" marginheight="0">

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="150" align="left">

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<a href="../main/index.asp">Home</a>

<div onclick="SwitchMenu('sub5')">Category 1</div>
<span class="submenu" id="sub5">
<a href="products.asp?C=1&S=1">>> Subcategory 1/1</a><br>
<a href="products.asp?C=1&S=2">>> Subcategory 1/2</a><br>
<a href="products.asp?C=1&S=3">>> Subcategory 1/3</a><br>
<a href="products.asp?C=1&S=4">>> Subcategory 1/4</a><br>
<a href="products.asp?C=1&S=5">>> Subcategory 1/5</a><br>
</span>

<div onclick="SwitchMenu('sub1')">Category 2</div>
<span class="submenu" id="sub1">
<a href="products.asp?C=2&S=1">>> Subcategory 2/1</a><br>
<a href="products.asp?C=2&S=2">>> Subcategory 2/2</a><br>
<a href="products.asp?C=2&S=3">>> Subcategory 2/3</a><br>
</span>


<div onclick="SwitchMenu('sub2')">Category 3</div>
<span class="submenu" id="sub2">
<a href="products.asp?C=3&S=1">>> Subcategory 3/1</a><br>
<a href="products.asp?C=3&S=2">>> Subcategory 3/2</a><br>
<a href="products.asp?C=3&S=3">>> Subcategory 3/3</a><br>
<a href="products.asp?C=3&S=4">>> Subcategory 3/4</a><br>
</span>

<div onclick="SwitchMenu('sub3')">Category 4</div>
<span class="submenu" id="sub3">
<a href="products.asp?C=4&S=1">>> Subcategory 4/1</a><br>
<a href="products.asp?C=4&S=2">>> Subcategory 4/2</a><br>
</span>

<div onclick="SwitchMenu('sub4')">Category 5</div>
<span class="submenu" id="sub4">
<a href="products.asp?C=5&S=1">>> Subcategory 5/1</a><br>
<a href="products.asp?C=5&S=2">>> Subcategory 5/2</a><br>
<a href="products.asp?C=5&S=3">>> Subcategory 5/3</a><br>
</span>

</td>
<td align="center" Valign="top">

CONTENT WILL APPEAR HERE

</td>
</tr>
</table>

</body>
</html>

Manny
08-30-2006, 09:05 AM
John,

Thanks a million for this. I've been trying to get this to work for about 48hrs now. I had a look at the new version but I couldn't get it to work the way you've got it working.

Thanks again.

Regards,

Manny