PDA

View Full Version : 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/dynamicindex1/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 (http://www.dynamicdrive.com/forums/showpost.php?p=28857&postcount=3)) 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:


<!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.

jscheuer1
08-16-2007, 03:18 AM
Not happening here in IE 7.

dcstow
08-16-2007, 03:24 AM
Not happening here in IE 7.

OK. Must be something fishy going on at my end.

Thanks again for looking.