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">
<%
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>
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">
<%
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>