Switch menu doesn't collapse on page load..

[triplwammy]

Hi all, Just beginning to work with javascript, but your switch menu was just what I was looking for. http://dynamicdrive.com/dynamicindex1/switchmenu.htm
So far I've I've been able to take the css code and put that in a separate css page to work on. No prob there. I then took the script code (what I grabbed is below) and placed that in a separate js file. Now when the page opens in either IE or Firefox, the menu is in the open state and submenus don't close unless you click on the menu title.
I'm thinking I need to place a "function" in the html page, but am clueless as to how that should be stated, other than calling for the js file I created.
Hope this has made sense, appreciate any help you could give me.

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

[ddadmin]

Does the persist feature work before you put the script inside an external .js file? From the look of the above there's nothing wrong with how you did it...

[triplwammy]

Hi, thanks for the quick response. The persist feature worked just fine before I decided to play with it! :o
No problem at all when I pulled the css into a separate file. It only died when I pulled the script. Would it help to see the html page since the js file seems okay?
Of course, I could always place the script back into the html page, that would probably be the easiest thing to do, but I'm curious to see if I can get it working with the js as a separate file. Thanks again.

[ddadmin]

Yes, if you have a link to the HTML page that reerences the external file (be sure persist is turned on), please post it here.

[triplwammy]

Okay, here's the link: http://www.yale.edu/oehs/jsmenu/menu.htm
Thanks for your patience!

[ddadmin]

Ok, I see the problem. The reason is due to an error in your CSS, inside menu.css. You have:


#sub1{
display: block;
width: 190px;
}

#sub2{
display: block;
width: 190px;
}

#sub3{
display: block;
width: 190px;
}

#sub4{
display: block;
width: 190px;
}


You need to remove "display: block" in all of the above four rules, as it's keeping the sub menus open in all cases. There's actually quite a few places in your CSS that's either redundant, or could even be problematic. Just with the above, for example, you can in fact remove all 4 rules above, and just add "width:190px" inside:


.submenu{
display: block;
width: 190px;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}


for example.

[triplwammy]

I've finally had a chance to get back to my script. Started cleaning up the css as suggested and the menu works great now. Thany you! But, of course, I have another question. Is it possible to include a page link in the "onclick" for the menu title and still have the sub menu expand with the switch to the new page? (i.e. clicking on "site menu" would open a new page and having the sub menu (what' new, what's hot, etc) show expanded on the new page as it's loaded). Again...thanks in advance...I tried looking through the forum to see if I could find and answer, and didn't, so if it's out there, appreciate you pointing me in the right direction.