Displaying and hiding and redisplaying menus

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:31

Displaying and hiding and redisplaying menus

Poster: erikpkn
Dated: Tuesday September 27 2005 - 11:26:51 BST

At some point in my JavaScript I need to make the main menu (Hoofdmenu) a submenu in another menu (Fotomenu). To do this I coded the following:

Code:

//First, place Hoofdmenu on a different location and make it invisible (so it can be shown as a submenu item of Fotomenu)

mm_changeMenuProperty("Hoofdmenu", 19, 30); // followscroll (null doesn't seem to work)
mm_changeMenuProperty("Hoofdmenu", 2, null); // top
mm_changeMenuProperty("Hoofdmenu", 3, null); // left
mm_changeMenuProperty("Hoofdmenu", 7, false); // alwaysvisible
menuDisplay(getMenuByName("Hoofdmenu"), false);

// Then, make Fotomenu visible

mm_changeMenuProperty("Fotomenu", 7, true);
menuDisplay(getMenuByName("Fotomenu"), true);

This is working great.
At some other point I want to reverse this, so I coded:

Code:

// Make Fotomenu disappear again

mm_changeMenuProperty("Fotomenu", 7, false);
menuDisplay(getMenuByName("Fotomenu"), false);

// Restore the location of Hoofdmenu and make it visible again

mm_changeMenuProperty("Hoofdmenu", 19, 9); // followscroll
mm_changeMenuProperty("Hoofdmenu", 2, 159); // top
mm_changeMenuProperty("Hoofdmenu", 3, 9); // left
mm_changeMenuProperty("Hoofdmenu", 7, true); // alwaysvisible
menuDisplay(getMenuByName("Hoofdmenu"), true);

This is also working, but only on Internet Explorer (6.0) on Windows XP and Opera (8.5). It is not working on Firefox (1.0.6). The submenu Fotomenu disappears alright, but the main menu Hoofdmenu does not come back again. I've tried using drawMenus() at several places, but this makes no difference.

To see this in action, please visit http://www.pkn-vriescheloo.nl.eu.org/test/fotos/0506/index.htm. Click on a photo to enlarge it and display the Fotomenu. You can see this is working. Then click Album to go back to the list of photos. In Internet Explorer and Opera the Hoofdmenu comes back, in Firefox it doesn't.

I am using version 5.732 of DHTML MENU with this menu_data.js:

Code:

fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=0;
_subOffsetTop=3;
_subOffsetLeft=-3;

with(menuStyle=new mm_style()){
bgimage=baseUrl+"bestanden/menu/images/achtergrond-menu.jpg";
overbgimage=baseUrl+"bestanden/menu/images/achtergrond-menu2.jpg";
pagebgimage=baseUrl+"bestanden/menu/images/achtergrond-menu3.jpg";
offbgcolor="#FCBE00";
image=baseUrl+"favicon.ico";
imagepadding=1;
offborder="1px solid #f8f8f8"
onborder="1px solid #d81b1b"
offcolor="#0c2577";
oncolor="#ffffff";
overfilter="Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=1;
subimage=baseUrl+"bestanden/menu/images/arrow.gif";
onsubimage=baseUrl+"bestanden/menu/images/arrow2.gif";
subimagepadding=1;
}

with(milonic=new menuname("Hoofdmenu")){
followscroll=9;
itemwidth=158;
alwaysvisible=1;
left=9;
style=menuStyle;
top=159;
aI("text=Thuis;url="+baseUrl+"index.htm;pagematch="+baseUrl+"index.htm;");
aI("showmenu=Gemeente;text=Gemeente;");
aI("showmenu=Preken;text=Preken;url="+baseUrl+"preken/050807/index.htm;");
aI("showmenu=Het Kerkvenster;text=Het Kerkvenster;url="+baseUrl+"hetkerkvenster/0509/index.htm;");
aI("showmenu=Fotos;text=Foto’s;url="+baseUrl+"fotos/index.htm;");
aI("text=Geschiedenis;url="+baseUrl+"geschiedenis/index.htm;pagematch=geschiedenis/;");
aI("text=Vanuit de pastorie;url="+baseUrl+"pastorie/index.htm;pagematch=pastorie/;");
aI("text=Links;url="+baseUrl+"links/index.htm;pagematch=links/;");
aI("text=Site-informatie;url="+baseUrl+"site-informatie/index.htm;pagematch=site-informatie/;");
aI("image="+baseUrl+"bestanden/menu/images/achtergrond-menu2.jpg;imagewidth=160;imageheight=2;type=header;imagepadding=0;");
aI("image="+baseUrl+"bestanden/menu/images/zoeken.ico;showmenu=Zoeken;text=Zoeken in site;");
}

with(milonic=new menuname("Gemeente")){
overflow="scroll";
style=menuStyle;
aI("text=Mensen en adressen;url="+baseUrl+"mensen/index.htm;pagematch=mensen/;");
aI("text=Kerkdiensten;url="+baseUrl+"kerkdiensten/index.htm;pagematch=kerkdiensten/;");
aI("text=Agenda;url="+baseUrl+"agenda/index.htm;pagematch=agenda/;");
aI("text=Koren;url="+baseUrl+"koren/index.htm;pagematch=koren/;");
aI("text=Documenten;url="+baseUrl+"documenten/index.htm;pagematch=documenten/;");
}

with(milonic=new menuname("Preken")){
overflow="scroll";
style=menuStyle;
aI("showmenu=Preken 2005;text=2005;");
}

with(milonic=new menuname("Preken 2005")){
overflow="scroll";
style=menuStyle;
aI("text=7 augustus;url="+baseUrl+"preken/index.htm;pagematch=preken/050807/;");
aI("text=17 juli;url="+baseUrl+"preken/050717/index.htm;pagematch=preken/050717/;");
aI("text=26 juni;url="+baseUrl+"preken/050626/index.htm;pagematch=preken/050626/;");
aI("text=15 mei;url="+baseUrl+"preken/050515/index.htm;pagematch=preken/050515/;");
}

with(milonic=new menuname("Het Kerkvenster")){
overflow="scroll";
style=menuStyle;
aI("showmenu=Het Kerkvenster 2005;text=2005;");
aI("showmenu=Het Kerkvenster 2004;text=2004;");
}

with(milonic=new menuname("Het Kerkvenster 2005")){
overflow="scroll";
style=menuStyle;
aI("text=September;url="+baseUrl+"hetkerkvenster/index.htm;pagematch=hetkerkvenster/0509/;");
aI("text=Juli/augustus;url="+baseUrl+"hetkerkvenster/0507/index.htm;pagematch=hetkerkvenster/0507/;");
aI("text=Juni;url="+baseUrl+"hetkerkvenster/0506/index.htm;pagematch=hetkerkvenster/0506/;");
aI("text=Mei;url="+baseUrl+"hetkerkvenster/0505/index.htm;pagematch=hetkerkvenster/0505/;");
aI("text=April;url="+baseUrl+"hetkerkvenster/0504/index.htm;pagematch=hetkerkvenster/0504/;");
aI("text=Maart;url="+baseUrl+"hetkerkvenster/0503/index.htm;pagematch=hetkerkvenster/0503/;");
aI("text=Februari;url="+baseUrl+"hetkerkvenster/0502/index.htm;pagematch=hetkerkvenster/0502/;");
aI("text=Januari;url="+baseUrl+"hetkerkvenster/0501/index.htm;pagematch=hetkerkvenster/0501/;");
}

with(milonic=new menuname("Het Kerkvenster 2004")){
overflow="scroll";
style=menuStyle;
aI("text=December;url="+baseUrl+"hetkerkvenster/0412/index.htm;pagematch=hetkerkvenster/0412/;");
aI("text=November;url="+baseUrl+"hetkerkvenster/0411/index.htm;pagematch=hetkerkvenster/0411/;");
aI("text=Oktober;url="+baseUrl+"hetkerkvenster/0410/index.htm;pagematch=hetkerkvenster/0410/;");
aI("text=September;url="+baseUrl+"hetkerkvenster/0409/index.htm;pagematch=hetkerkvenster/0409/;");
}

with(milonic=new menuname("Fotos")){
overflow="scroll";
style=menuStyle;
aI("showmenu=Fotos 2005;text=2005;");
aI("showmenu=Fotos 2004;text=2004;");
}

with(milonic=new menuname("Fotos 2005")){
overflow="scroll";
style=menuStyle;
aI("text=Juni;url="+baseUrl+"fotos/0506/index.htm;pagematch=fotos/0506/;");
aI("text=Mei;url="+baseUrl+"fotos/0505/index.htm;pagematch=fotos/0505/;");
aI("text=April;url="+baseUrl+"fotos/0504/index.htm;pagematch=fotos/0504/;");
aI("text=Maart;url="+baseUrl+"fotos/0503/index.htm;pagematch=fotos/0503/;");
aI("text=Januari;url="+baseUrl+"fotos/0501/index.htm;pagematch=fotos/0501/;");
}

with(milonic=new menuname("Fotos 2004")){
overflow="scroll";
style=menuStyle;
aI("text=December;url="+baseUrl+"fotos/0412/index.htm;pagematch=fotos/0412/;");
aI("text=November;url="+baseUrl+"fotos/0411/index.htm;pagematch=fotos/0411/;");
}

with(milonic=new menuname("Zoeken")){
overflow="scroll";
style=menuStyle;
aI("image="+baseUrl+"bestanden/menu/images/zoeken.ico;"+
"text=<form action=http://search.freefind.com/find.html method=get target=_top style='margin: 10px 0 10px 0'>"+
"<input type=hidden name=lang value=nl>"+
"<input type=hidden name=id value=16240698>"+
"<input type=hidden name=pageid value=r>"+
"<input type=hidden name=mode value=all>"+
"<input type=hidden name=n value=0>"+
"<input type=text name=query size=30>"+
"<input type=submit value=Zoek></form>;type=form;");
}

with(milonic=new menuname("Fotomenu")){
orientation="horizontal";
followscroll=9;
itemwidth=0;
alwaysvisible=0;
left=9;
style=menuStyle;
top=9;
aI("showmenu=Hoofdmenu;text=Menu;");
aI("image="+baseUrl+"bestanden/menu/images/vorige.ico;text=Vorige;url=javascript:vorigeFoto();");
aI("image="+baseUrl+"bestanden/menu/images/volgende.ico;text=Volgende;url=javascript:volgendeFoto();");
aI("image="+baseUrl+"bestanden/menu/images/naaroverzicht.ico;text=Album;url=javascript:terugNaarOverzicht();");
}

drawMenus();

Poster: Ruth
Dated: Tuesday September 27 2005 - 21:14:12 BST

I don't know anything about functions, nor do I read Dutch, but I think that Vorige means back? Have you tried just using the javascript back function to see if it just takes you back to the page and the regular menu is on it?

Code:

aI("image=etc.;url=javascript:history.back();");

Ruth

Poster: erikpkn
Dated: Wednesday September 28 2005 - 14:32:07 BST

Ruth, thank you for your quick response. history.back() can't work, because the photo album and the enlarged photos are all on the same HTML page. Switching between them is all happening in JavaScript and CSS (with display: none;).

So I tried location.replace("index.htm"). That worked, but I really don't want to reload the page for several reasons. So I tried to dig a little deeper into the problem and I made a little script that does nothing but to toggle the menu off and on.

Code:

var menuOn = true;

function toggleMenu() {
   menuOn = !menuOn;
   menuDisplay(getMenuByName("Mainmenu"), menuOn);
}

And as I tested this, it went well in Internet Explorer and Opera, but not in Firefox. The menu appears at loadtime, disappears the first time, but never appears again. So maybe there's something not working well in your code.

You can try this at http://www.pkn-vriescheloo.nl.eu.org/test/fotos/0506/test.htm. Just click at the text to toggle the menu off and on.

Here's the complete code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
   <script language="JavaScript" src="../../bestanden/menu/milonic_src.js" type="text/javascript"></script>
   <script language="JavaScript">
   <!--
      if (ns4) _d.write("<scr"+"ipt language='JavaScript' src='../../bestanden/menu/mmenuns4.js'><\/scr"+"ipt>");
      else _d.write("<scr"+"ipt language='JavaScript' src='../../bestanden/menu/mmenudom.js'><\/scr"+"ipt>");
      
      var menuOn = true;
      
      function toggleMenu() {
         menuOn = !menuOn;
         menuDisplay(getMenuByName("Mainmenu"), menuOn);
      }
   //-->
   </script>
</head>

<body onClick="toggleMenu();">
Click here to toggle menu on and off...
<script language="JavaScript">
fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=0;
_subOffsetTop=3;
_subOffsetLeft=-3;

with(menuStyle=new mm_style()){
offbgcolor="#FCBE00";
imagepadding=1;
offborder="1px solid #f8f8f8"
onborder="1px solid #d81b1b"
offcolor="#0c2577";
oncolor="#ffffff";
overfilter="Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=1;
subimagepadding=1;
}

with(milonic=new menuname("Mainmenu")){
followscroll=9;
itemwidth=158;
alwaysvisible=1;
left=9;
style=menuStyle;
top=159;
aI("text=Test;");
aI("text=Test2;");
}

drawMenus();

</script>
<script language="JavaScript" src="../../bestanden/menu/mm_menueditapi.js" type="text/javascript"></script>
</body>
</html>

Erik.

Poster: Ruth
Dated: Wednesday September 28 2005 - 21:34:08 BST

Hi Erik,

I'm sorry, I can't help on this. I do not know javascript or functions.

Ruth

Poster: erikpkn
Dated: Wednesday September 28 2005 - 22:39:33 BST

Never mind, Ruth, thanks anyway for your time and effort.

But could you pass on to the developers that it is the function menuDisplay() as described on the JavaScript Menu Methods page (http://www.milonic.com/menu_methods.php) that doesn't seem to work properly on Firefox (1.0.6 on Windows XP)?

Thanks, Erik.

Poster: erikpkn
Dated: Wednesday September 28 2005 - 23:14:39 BST

In the mean time, after some experimenting I found that this is working on all three tested browsers:

Code:

function toggleMenu() {
   if (menuOn) {
      mm_changeMenuProperty("Mainmenu", 7, false);
      closeAllMenus();
   }
   else {
      mm_changeMenuProperty("Mainmenu", 7, true);
      popup("Mainmenu");
   }
   menuOn = !menuOn;
}

Erik.

Industrial Strength JavaScript and DHTML Menus

Displaying and hiding and redisplaying menus