Issue with Switch Menu in IE

**dcstow** · 08-15-2007, 11:55 PM

1) Script Title: Switch Menu

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

3) Describe problem: Having an issue with this script in IE only. When selecting an item from the submenu, the currently open menu collapses.

Example:

I have the following menu structure:

- Home
- About Us
- Careers
- Contact Us

When I selected About Us, the following submenus are made available:

- Home
- About Us
--- Overview
--- Our Services
--- Our Approach
--- Our People
--- Our Culture
- Careers
- Contact Us

Then, when I select one of the submenu items, the selected menu, About Us, collapses. I would obviously like it to remain open.

I have applied (this) mod by jscheuer1.

As mentioned, this script works fine with FF, but not with IE. I have tested it in both IE6 & 7 on multiple machines.

Any help would be appreciated

Link to test site: http://www.creamdesign.com.au/test/index.asp

Below is the code for the index.asp page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</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){
			if (typeof obj!=='undefined')
			var el = document.getElementById(obj);
			var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
			if(typeof obj=='undefined'||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";
			}
			if (typeof obj=='undefined')
			return;
			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>

	<link rel="stylesheet" href="style.css" type="text/css" />
	
</head>

<body>

<div id="maincontainer">

	<div id="topsection">
		<div class="innertube">
			
			<img src="images/logo.jpg" alt="Logo" />

		</div>
	</div>


	<div id="contentwrapper">
		<div id="contentcolumn">

			<&#37;
			dim page
			page = Request.QueryString("page")
			%>
			
			<% if page = "" OR page = "home" Then %>
			<!--#include file="home.asp" -->
			<% end if %>

			<% if page = "aboutus" Then %>
			<!--#include file="aboutus.asp" -->
			<% end if %>

			<% if page = "ourservices" Then %>
			<!--#include file="ourservices.asp" -->
			<% end if %>

			<% if page = "ourapproach" Then %>
			<!--#include file="ourapproach.asp" -->
			<% end if %>

			<% if page = "ourpeople" Then %>
			<!--#include file="ourpeople.asp" -->
			<% end if %>

			<% if page = "ourculture" Then %>
			<!--#include file="ourculture.asp" -->
			<% end if %>

			<% if page = "careers" Then %>
			<!--#include file="careers.asp" -->
			<% end if %>

			<% if page = "benefits" Then %>
			<!--#include file="benefits.asp" -->
			<% end if %>

			<% if page = "contactus" Then %>
			<!--#include file="contactus.asp" -->
			<% end if %>

			<% if page = "privacy" Then %>
			<!--#include file="privacy.asp" -->
			<% end if %>

		</div>
	</div>


	<div id="leftcolumn">
		<div class="innertube">

			<div id="masterdiv">

				<ul>

I have the following menu structure:

- Home
- About Us
- Careers
- Contact Us

When I selected About Us, the following submenus are made available:

- Home
- About Us
--- Overview
--- Our Services
--- Our Approach
--- Our People
--- Our Culture
- Careers
- Contact Us

Then, when I select one of the submenu items, the selected menu, About Us, collapses. I would obviously like it to remain open.

<li><div class="menutitle" onclick="SwitchMenu()"><a href="index.asp?page=home">Home</a></div></li>

<li><div class="menutitle" onclick="SwitchMenu('sub1')">About Us</div></li>
<span class="submenu" id="sub1">

								<li><a href="index.asp?page=aboutus">Overview</a></li>
								<li><a href="index.asp?page=ourservices">Our Services</a></li>
								<li><a href="index.asp?page=ourapproach">Our Approach</a></li>
								<li><a href="index.asp?page=ourpeople">Our People</a></li>
								<li><a href="index.asp?page=ourculture">Our Culture</a></li>
							</ul>
						</span>

					<li><div class="menutitle" onclick="SwitchMenu('sub2')">Careers</div></li>
						<span class="submenu" id="sub2">
							<ul>
								<li><a href="index.asp?page=careers">Overview</a></li>
								<li><a href="index.asp?page=benefits">Employment Benefits</a></li>
							</ul>
						</span>

					<li><div class="menutitle" onclick="SwitchMenu()"><a href="index.asp?page=contactus">Contact Us</a></div></li>

				</ul>

			</div>
			
		</div>
	</div>


	<div id="rightcolumn">
		<div class="innertube">
		
			<img src="images/books.jpg" alt="Books Image" />
		
		</div>
	</div>


	<div id="footer">

		<small><a href="index.asp?page=privacy">Privacy Policy</a></small>
	
	</div>

</div>

</body>
</html>

**jscheuer1** · 08-16-2007, 03:05 AM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**dcstow** · 08-16-2007, 03:12 AM

I have managed to get access to this server to test asp pages.

http://www.creamdesign.com.au/test/index.asp

I have also attached the files in a zip.

Thanks for taking a look, it is very much appreciated.