Submenu positioning problem with window resize [solved]

[t-punkt]

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

[Ruth]

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

[t-punkt]

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

Thanks anyway
Thomas

[Ruth]

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

[t-punkt]

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: Select all

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: Select all

xPosition = calcXPos(600);

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

Code: Select all

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: Select all

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: Select all

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