Submenu positioning problem with window resize [solved]

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

Submenu positioning problem with window resize [solved]

Poster: t-punkt
Dated: Sunday January 28 2007 - 18:41:13 GMT

Hi,

I was searching for a flexible menu system and so I found milonic. After playing around with it for a while I have done an example, how my menu should look like. You can watch it here.

As you can see, the main menu should be positioned centered or maybe in a table cell. The first submenu should appear at the x-position of the main menu. In the example this is done with negative submenu offset. So far so good.

In the example the negative offset is "hardcoded", thru testing I found the right values. Now, I want to create the menu dynamically with a CMS and so I do not know the width of each menu item and how to calculate the offsets then.

Does anyone know a way having the first submenu at the x-position of the main menu WITHOUT setting an offset?

Thanks,
Thomas

Poster: Ruth
Dated: Monday January 29 2007 - 2:26:34 GMT

Hi Thomas,

I'm sorry but I don't know how you would set that without using an offset. Now, you can set the items' width so that you will know what they are, either in the menu which means all items are that size, or in each item so you can make each item x number of pixels.

But, there are some things to keep in mind. If you are not using images, then any browser other than IE will change the text size of the page author based on the users' settings. So, even if you set your font size either in the menu or by using css, the text size will change based on the users' settings, not the page author's settings. Accessibility

Ultimately, if you want to make sure the menus are always the same you will need to use images with text since these do not change. Of course that means you limit accessibility for users who need larger text.

I hope I understood what you were asking?

Ruth

Poster: t-punkt
Dated: Monday January 29 2007 - 22:43:12 GMT

Hi Ruth,

thanks for your quick answer.

As you can imagine, I wasn´t pleased with it

Fortunately, I found a solution I can live with.

I wrote a function to detect the window size. So I can position the main menu and the first submenus where I want :idea:

Thanks anyway

Thomas

Poster: Ruth
Dated: Monday January 29 2007 - 23:08:49 GMT

Hi,

Unless you can't do it, would you be willing to share the function? I don't do js so am very limited in help like this and I'm sure other users with similar questions would appreciate it. There have been a few requests like yours but my response is as I gave you given my lack of js knowledge.

Ruth

Poster: t-punkt
Dated: Sunday February 4 2007 - 17:17:45 GMT

Hi Ruth,

shure I will

First the function that calculates the x-position of a centered Element (maybe a table or something), where the menu should be aligned at:

Code:

function calcXPos(centerElementWidth){
   w=x=0;
   if(typeof (window.innerWidth) == 'number') w = window.innerWidth;
   else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) w = document.documentElement.clientWidth;
   else if (document.body && (document.body.clientWidth || document.body.clientHeight)) w = document.body.clientWidth;
   x=parseInt((w/2)-(centerElementWidth/2));
   return x;
}

As an argument it needs to know the width of the centered element, so the function call should look like this:

Code:

xPosition = calcXPos(600);

The calculated value can now be taken to initially set up the menu(s):

Code:

with(menu=new menuname("...")){
...
left=xPosition;
...
}

When the menu has been built, all the menus that are positioned like that should be aligned to the centered element.

Now, if the window size changes, the menus stuck unimpressed in their positions. This behaviour needs to be changed. Here are two more functions to do that:

Code:

function updateMainMenuPosition(menuName,xPosition,yPosition){
   menu=getMenuByName(menuName);
   spos(gmobj("menu"+menu),yPosition,xPosition);
}

function updateSubMenuPosition(menuName,xPosition,yPosition){
   if(typeof(menuName)!='object')menuName=new Array(menuName);
   for(i=0;i<menuName.length;i++){
      menu=getMenuByName(menuName[i]);
      _m[menu][2]=yPosition;
      _m[menu][3]=xPosition;
      _setPosition(menu);
   }
}

Two functions, because the main menu and the sub menus are positioned with different internal functions. Maybe somebody can made this simpler...

The function call should look like this:

Code:

window.onresize=function(){
   updateMainMenuPosition('mainmenu',calcXPos(600),null);
   updateSubMenuPosition(new Array('submenu_2', 'submenu_3', 'submenu_4', 'submenu_5'),calcXPos(600),null);
}

Both funtions need three given values as arguments: the name of the menu, the new x-position and/or the new y-position.

The second function "updateSubMenuPosition" can take an array with menu names as the first argument. If one of the remaining arguments is not needed, it should be valued with null.

A working example can be found here

Thomas

Industrial Strength JavaScript and DHTML Menus

Submenu positioning problem with window resize [solved]