How to hide and show menu through javascript

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

How to hide and show menu through javascript

Poster: krogstrup
Dated: Monday December 20 2004 - 20:24:24 GMT

Hi

I need to do this:

1) drawMenus()
2) hideMenu
3) change position of menu
4) showMenu

I have made 2 functions for this purpose:

Code:

mm_showMenu() {
   menuDisplay(gmobj("menu0"),1)
}

mm_hideMenu() {
   menuDisplay(gmobj("menu0"),0)
}

My problem is that I cant seem to make the menu appear again. When I have hidden the menu it doesnt react on my showMenu function.

What am I doing wrong ?

Poster: krogstrup
Dated: Monday December 20 2004 - 20:33:35 GMT

My code should have been:

Code:

function mm_showMenu() { 
   menuDisplay(gmobj("menu0"),1);
} 

function mm_hideMenu() { 
   menuDisplay(gmobj("menu0"),0);
}

But it still doesnt work ?!?

Poster: kevin3442
Dated: Tuesday December 21 2004 - 22:00:16 GMT

Hi krogstrup,

Your calls to menuDisplay() pass the wrong type of value in the first parameter. You're passing a menu object. I realize that's how it is documented on the methods page, but I believe that documentation is incorrect (see this post for an explanation). Try passing the menu number instead (i.e., the index into the _m[] array). In other words, assuming you want to affect menu number 0 (_m[0], which is usually the "main" menu), try this:

Code:

function mm_showMenu() { 
   menuDisplay(0,1); 
} 

function mm_hideMenu() { 
   menuDisplay(0,0); 
}

Here are two general functions that I have often used successfully to hide and show any menu:

Code:

function mm_showMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
  var menuNum = getMenuByName(menuName);
  if (arguments.length > 1)_m[menuNum][7] = arguments[1];
  menuDisplay(menuNum, 1);
}

function mm_hideMenu(menuName) // , alwaysVisState = optional. 1=on, 0=off
{
  var menuNum = getMenuByName(menuName);
  if (arguments.length > 1)_m[menuNum][7] = arguments[1];
  menuDisplay(menuNum, 0);
}

The first parameter is the name of the menu to open or close, as specified in the menu definition. E.g., mm_showMenu("Main Menu"). Each function also takes an optional second parameter which, when passed, turns the menu's alwaysvisible property on or off. E.g., mm_hideMenu("Main Menu", 1).

Cheers,

Kevin

Poster: krogstrup
Dated: Wednesday December 22 2004 - 12:58:24 GMT

Hi Kewin

Thanks for your answer - it works great :-)

But I found out that this solution doesnt solve my problem.

I have made a script that dynamically returns the left position af my menu. I have done this because my design is centered in the browser, so I need my menu to be positioned correctly regardles of the users screen resolution.

Then in the end of menu_data.js I use the function "spos" to move the menu to the correct left position.

This works fine, but the menu first appears at position 0 for 1-2 secunds and is then moved to the correct position when the browser reaches my line with the "spos" function.

Some of my customers has complained about this.

So want I want to be able to do is this:

I would like to use my "findLeftPos" script directly when specifying the left pos of the menu.

Something like this:

Code:

function getLeftPosOfMainMenu() {

   var ie4_check = (document.all && !document.getElementById) ?    true : false;
   var ie5_check = (document.all && document.getElementById) ?    true : false;

   if (ie4_check || ie5_check) {
      width = document.body.clientWidth;
      } 
   else {
      width = window.innerWidth;
   }
   
   intLeftPos = width/2-380
   intLeftPos = intLeftPos + <%=intMainMenuLeftPos%>

   return intLeftPos;
}


with(milonic=new menuname("Main Menu")){
style=mainStyle;
top=20;
left=getLeftPosOfMainMenu();
alwaysvisible=1;
orientation="horizontal";

aI("text=;url=;showmenu=menu");

}

But the code above does not work though I know for a fact that my function returns an integer for the left pos.

Is it imposible to call a function when specifying the parameters for the menus ?

Do you understand my problem and do you have some idea on how to solve this.....?

Kind regards

David Krogstrup
Denmark

Poster: krogstrup
Dated: Wednesday December 22 2004 - 13:01:27 GMT

Hi again

You can see an example here:

http://www.cmspartner.dk

Poster: kevin3442
Dated: Wednesday December 22 2004 - 18:28:37 GMT

Hi David,

krogstrup wrote:

...Thanks for your answer - it works great :-)

You're welcome.

krogstrup wrote:

Do you understand my problem and do you have some idea on how to solve this.....?

Yes and Yes.

krogstrup wrote:

...Then in the end of menu_data.js I use the function "spos" to move the menu to the correct left position. This works fine, but the menu first appears at position 0 for 1-2 secunds and is then moved to the correct position when the browser reaches my line with the "spos" function. Some of my customers has complained about this.

Some quick solutions might be:

(1) In your Main Menu, set the left property to some large negative value (e.g., left = -1000;). The Main Menu will still make its first appearance in its pre-assigned location when the page loads, but that location will be outside of the viewable area of the browser window. So, the user won't see the menu until your function moves it to its desired location. From the user's point of view, the menu makes its first appearance where it's supposed to be (and what they don't see, they don't know!) This above solution is probably the easiest if you want to stick with your functions, because it would require only one small change.

(2) You could also try setting alwaysvisible = 0; in your Main Menu. Then you won't need to call mm_hideMenu() at the top of setLeftPosOfMainMenu(), because the menu will already be hidden. Then, when you call mm_showMenu() at the bottom of setLeftPosOfMainMenu(), pass a 1 as a second parameter, like so:

Code:

mm_showMenu('Main Menu', 1);

That will simultaneously (a) show the Main Menu and (b) set alwaysvisible = 1 in the Main Menu, so that once you show it, it remains on screen.

krogstrup wrote:

So want I want to be able to do is this: I would like to use my "findLeftPos" script directly when specifying the left pos of the menu. Something like this:

Code:

function getLeftPosOfMainMenu() {

   var ie4_check = (document.all && !document.getElementById) ?    true : false;
   var ie5_check = (document.all && document.getElementById) ?    true : false;

   if (ie4_check || ie5_check) {
      width = document.body.clientWidth;
      } 
   else {
      width = window.innerWidth;
   }
   
   intLeftPos = width/2-380
   intLeftPos = intLeftPos + <%=intMainMenuLeftPos%>

   return intLeftPos;
}

with(milonic=new menuname("Main Menu")){
style=mainStyle;
top=20;
left=getLeftPosOfMainMenu();
alwaysvisible=1;
orientation="horizontal";
aI("text=;url=;showmenu=menu");
}

But the code above does not work though I know for a fact that my function returns an integer for the left pos. Is it imposible to call a function when specifying the parameters for the menus ?

Yes, it is possible to use the return values of functions to set menu parameters. I've done the same sort of thing myself. I tried a test with your getLeftPosOfMainMenu() function (minus the asp code) and it worked fine. You say the code didn't work... how did it fail exactly? Was there an error message?

As a final comment, I have to mention that I think you might be making this too difficult. The menu system has positioning functions built in to do what it seems to me that you you're trying to do. For a site where the content is centered, you could position your menu using a left offset from center, using the left and screenposition menu properties. For example, to offset a menu 380 pixels from center, you would do like so:

Code:

with(milonic=new menuname("Main Menu")){
style=mainStyle;
top=139;
screenposition="center";
left="offset=-380";
alwaysvisible=1;
orientation="horizontal";
aI(...
}

You can read more about this approach in this sample. When you use screenposition, the menu also autmatically handles the onload and onresize positioning, so this may simplify the process for you.

Hope that helps,

Kevin

Poster: krogstrup
Dated: Wednesday December 22 2004 - 19:53:56 GMT

Hi Kevin

Thanks again for your very impressive answer - Im very greatfull for your well-explained answer !

Both your solution 1 and 2 works great :-)

I think I´ll stick to solution 1 - very easy to implement...

But your comments on using screenposition and left:offset to solve my problem doesnt work :-(

This is my scenario:

1) We have a total browser with of 845 pixels (just an example)
2) My design is 760 pixels and centered
3) Within my centered design I need the menu to start at left: 45 pixels

This means I need to do the following:

1) intLeftPos = totalBrowserWidth / 2
2) intLeftPos = intLeftPos - (760/2)
3) intLeftPos = intLeftPos + 45

Your solution:

Code:

screenposition="center"; 
left="offset=-380"; 

does not perform the same job.

The problem is that if my menu for example is 320 pixels long. Then this menu is centered and there after the menu is moved 380 pixels to the left. But it is not moved 380 pixels from the center of the screen but from the starting left point of my menu.

Therefor this solution doesnt work for me.

Am I making sence..... ?

Kind regards

David Krogstrup

Poster: kevin3442
Dated: Wednesday December 22 2004 - 22:07:58 GMT

Hi David,

krogstrup wrote:

...Thanks again for your very impressive answer - Im very greatfull for your well-explained answer !

You're welcome.

krogstrup wrote:

...But your comments on using screenposition and left:offset to solve my problem doesnt work :-(

It should work perfectly. This type of centered design is one of the main reasons the offset capability was implemented.

krogstrup wrote:

Code:

screenposition="center"; 
left="offset=-380"; 

does not perform the same job. The problem is that if my menu for example is 320 pixels long. Then this menu is centered and there after the menu is moved 380 pixels to the left. But it is not moved 380 pixels from the center of the screen but from the starting left point of my menu.

380 was just an arbitrary number used as an example. Yours would require a much smaller adjustment. Bu the main point is that, since the menu is esentially centered first, then moved to the left, it doesn't really matter whether it is moved from the center of the screen or from the starting left point of the menu. Both give the same result.

Try adding the following code to your menu_data.asp file and you'll see what I mean.

Code:

with(milonic=new menuname("Main Menu2")){
style=mainStyle;
top=130;
screenposition="center";
left="offset=-86";
alwaysvisible=1;
orientation="horizontal";
aI("text=CMS SYSTEM;url=/1/2/cms_system.html;showmenu=menu2");
aI("text=HOSTING;url=/1/13/hosting.html;showmenu=menu13");
aI("text=SØGEMASKINER;url=/1/19/søgemaskiner.html;showmenu=menu19");
aI("text=KURSER;url=/1/23/kurser.html;showmenu=menu23");
}

This "Main Menu2" is mainly a duplicate of your Main Menu, placed just above the intended location so that you can compare the placement of the two. A left offset of about -86 px should be just about right. Try loading the page with both menus, then adjust the width. You'll see that the offset menu tracks the window size change in the correct position.

I guess it doesn't hurt that you have at least three options. Whichever one you like best, and works the way you want, that's the one to use!

Cheers,

Kevin

Poster: krogstrup
Dated: Wednesday December 22 2004 - 22:26:28 GMT

Hi Kewin

Maybe we are misunderstandig eachother because I´ve forgotten to mention something very important.

The websites I produce is delivered with a content management system. This means that my customers manage the top Main Menu them self. This means that they can add pages and remove pages from the menu. Therefor I need a solution that works no matter the width of the top menu.

I could use offset -86 like you suggest - but next time my customer adds or remove a page from the menu, I would need to adjust this setting.

Therefor I still thing the menu misses a solution for my special case - which I believe could be relevant for lots of others who produces websites based on CMS systems.

But anyway - My problem is solved now, and for that I thank you :-)

I would just like you to understand that my problem cant be solved within the menus standard options....

Merry Christmas :-)

Poster: dyma97
Dated: Thursday January 6 2005 - 17:13:54 GMT

Does anyone know of the menuDisplay() or treeMenuDisplay working with the latest version of the collapsible menu? If so, please post an example.

Industrial Strength JavaScript and DHTML Menus

How to hide and show menu through javascript