dynamically change menu style

[BigWebGuy]

I have a horizontal menu w/vertical submenus that for certain pages i would like to display as a vertical collapsable menu.

horizontal menu is: https://www.eval2.asmr.com/milonictest/milonic_h.htm

my attempt at converting it to vertical collapsable menu is: https://www.eval2.asmr.com/milonictest/milonic_c.htm (the menu is on the left sidebar, it is using the horizontal style, which is white, so it is hard to see until you mouseover)

i can move the menu and convert all the items to type = tree but the menu style is not changing. By looking at the in memory DOM, the menus still have the class associated with the horizontal menus, so i would suspect that when the menus are getting re-built with BDMenu(), the new style is not being applied.

thank you.

[John]

BWG -

Your _data file for c.htm is not set up properly for a tree configuration. See one here. Note the type=tree;, which I don't see in yours.

Also, your _data files need a closing drawMenus();.

[BigWebGuy]

john, look at the page source. the call to drawMenus is right below the menu definitions.

I understand that my menu definitions are not correct for a tree configuration, my goal is to be able to dynamically change them to a tree configuration, which is working correctly. The problem is that once i have them in tree configuration, they are still using the menustyle defined originally instead of the menustyle that i re-assigned. That is why you may have not seen the conversion to the tree-type working. The horizontal menu style is white, so it makes it hard to see when it's in the tan sidebar. if you mouseover the sidebar, you can see the menu items better.

The whole deal is that i'm building the menus from a database, and i would rather not have to add another column to my tables to define what pages get what menustyles. Since i only have a handful of pages that would implement a tree style version of these menus, a small script to dynamically change from the horizontal implementation to the collapsable implementation would be preferred.

again, if you view the source of the page, you can see the script i'm attempting to use, but i'll snip it below anyways. thanks

Code: Select all

		function mm_changeItemProperty(menuName, itemName, codeRef, newValue, updateDisplay)
		{
		  menuName = menuName.toLowerCase();
		  for (i=0; i<_mi.length; i++)
		    if (_mi[i][1].replace(/\&nbsp\;/ig,' ') == itemName && _m[_mi[i][0]][1] == menuName) break;
		  if (i == _mi.length) return;
		  _mi[i][codeRef] = newValue;
		  if (updateDisplay) BDMenu(_mi[i][0]);
		}

		var mIx = getMenuByName("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}");
		var mRef = gmobj("menu" + mIx);
		
		_m[mIx][6]= RNowMainTreeStyle;
		_m[mIx][9] = "vertical";
		_m[mIx][4] = 210;
		
		spos(mRef, 65, null, null, 220);
		
		mm_changeItemProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", "Registrar Actions", 34, "tree", false);
		mm_changeItemProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", "Funding", 34, "tree", false);
		mm_changeItemProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", "Administration", 34, "tree", false);
		mm_changeItemProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", "Help", 34, "tree", false);
		mm_changeItemProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", "Links", 34, "tree", true);

[Ruth]

Hi,

I think you need a different function. You are using the mm_changeItemProperty so you are applying that to each item, referencing the tree. So either you need to also apply the onbgcolor, offbgcolor, oncolor, offcolor to each item or you have to use a function that will change a menu property. You might even be able to use it to change to a treemenu.

If you know how to do things with functions this is the function:

Code: Select all

function mm_changeMenuProperty(menuName, propertyRef, newValue) 
{ 
  var menuNum = getMenuByName(menuName); 
  _m[menuNum][propertyRef] = newValue; 
  BDMenu(menuNum); 
}

It was also written by Kevin. You can find his expanation and the context about it HERE

Since I don't do functions or javascript, I could be entirely wrong on this, or it could have other limitations that won't allow it to work for you Take it with a grain of salt

Ruth

[BigWebGuy]

Ruth, it appears to me that the mm_changeMenuProperty function does the exact same thing as this line of code that i already have.

Code: Select all

_m[mIx][6]= RNowMainTreeStyle; 

then in the final call to the mm_changeItemProperty function, i pass true as the updateDisplay parameter which will call the BDMenu function to refresh the menu.

so it looks like there is something internal in the menu that is not re-applying styles when the menu is refreshed with the BDMenu function. Perhaps there is another method that can be used to redraw the menus.

[kevin3442]

Hi BigWebGuy,

I see what you're doing. Pretty clever actually, changing the type property to "tree" for the pertinent menu items. It's nice to see people using the mm_changeItemProperty() function now and then.

You may find the mm_changeMenuProperty() function that Ruth mentioned useful in other circumstances, but I see that you're just manipulating the pertinent array elements directly. Makes sense, since you apparently know the array structure, plus you also need the menu object in order to manipulate its size and position. Looking at your code, everything looks fine, and it seems "that close" to working. Of course, it's this line:

Code: Select all

_m[mIx][6]= RNowMainTreeStyle;

that's part of the key to switching the style. Inspecting the object in _m[mIx][6] after the assignment, you find that the new style defintion is really there (I've tried this myself). But then you have to somehow force the menu to redraw using the new style. You mentioned trying to do that with a call to BDMenu() in your initial post. I assume you're relying on mm_changeItemProperty() to make that function call. And I see that it should be doing just that; in your last call to mm_changeItemProperty(), where you pass true in the last parameter. Looks to me like this is one of those "it should work" things. The logic and the code seem sound.

You know... I tried doing something similar (just for kicks) quite a while ago, and I ran into a similar wall. Even though the style object in _m[6] was in fact changed, I couldn't get the menu to redraw using the new style. Tried several different things, but nothing worked. I just assumed I was doing something wrong, then I sort of forgot about it (it's not every day that someone tries to manipulate the menu like this). Time for another try...

I'll be back.

Kevin

EDIT: Sorry... I didn't notice your previous post when I wrote this. Would have cut my long windedness down to a mere medium windedness.

[BigWebGuy]

thanks Kevin, glad to know i'm on the right track. I'm sitting here thinking exactly the same thing you are....it should work!

I'm looking forward to what you come up with, cuz at this point, short of de-compressing the menu and getting dirty, i'm out of "elegant" ideas.

Thanks

[Ruth]

I'll keep watching and see what happens. I can't figure how you can use the mm_changeItemProperty for changing the menustyle when it is not an item property and the function calls for a parameter of an itemRef.

Ruth

[John]

I've been working on it, too, at http://www.west.asu.edu/sa/testsite/index2.htm. Didn't realize the other two had jumped in, but I'm certainly glad they did.

Got it to work more like a tree, and found one minor error. You have...

Code: Select all

menubgcolor="#f0f4ff;"

...in your sub definition. Should, of course, be...

Code: Select all

menubgcolor="#f0f4ff";

[BigWebGuy]

I can't figure how you can use the mm_changeItemProperty for changing the menustyle when it is not an item property...

Ruth, i am only using the mm_changeItemProperty function for changing the items to be of type=tree (and for redrawing the menu when true is passed as the updateDisplay parm).

The following line is what i am attempting to use to change the menustyle

Code: Select all

_m[mIx][6]= RNowMainTreeStyle;

[BigWebGuy]

I've been working on it, too, at http://www.west.asu.edu/sa/testsite/index2.htm. Didn't realize the other two had jumped in, but I'm certainly glad they did.

John, I don't see any difference in functionality from my example except for that it's been set to singleMasterMenu=true.

I am not having a problem changing the behavior to be like a tree menu, that part is working fine. The problem is that when the menu is redrawn, it is not picking up the new menustyle i have assigned.

thanks for the catch on the color mistake though....second set of eyes always helps.

[Ruth]

Hi,

Having the ; in the wrong place may just cause problems on some browsers. JFI, I was trying the other menu properties and there are some others that won't allow changing, like margin, followscroll, menuheight.

Ruth

[kevin3442]

Hi Ruth,

I'll keep watching and see what happens. I can't figure how you can use the mm_changeItemProperty for changing the menustyle when it is not an item property and the function calls for a parameter of an itemRef.

Let me try to clarify:

The BigWebGuy has three goals: (1) to switch the menu from a horizontal "normal" menu to a vertical tree menu. (2) To make the main menu vertical and reposition it. (3) To apply a different menu style to the tree version.

He's only using mm_changeItemProperty() for goal #1, to change the type property (codeRef 34) of specific menu items to "tree", so that the menu becomes a tree type. That part seems to be working.

Goal #2 is accomplished with this bit:

Code: Select all

var mIx = getMenuByName("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}");
var mRef = gmobj("menu" + mIx);
<...>
_m[mIx][9] = "vertical"; 
_m[mIx][4] = 210;
spos(mRef, 65, null, null, 220);

He could have used mm_changeMenuProperty() to change the menu properties, but since he's figured out the menu array structure, he's just assigning values directly to the appropriate members of the array. For example, _m[mIx][4] = 210; makes the menu's itemwidth 210px and _m[mIx][9] = "vertical"; makes it a vertical menu. He could have used mm_changeMenuProperty("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}", 9, "vertical") to make it a vertical menu, but changing the value in the appropriate array member is more direct and, in this case, more efficient, since mm_changeMenuProperty() calls BDMenu() every time (here, he only needs it once). Finally, spos(mRef, 65, null, null, 220); moves the menu to top=65 and makes the menu width 220px. Presto... goal #2 is also working.

Goal #3 is not working. It's supposed to be accomplished with this:

Code: Select all

var mIx = getMenuByName("{A61F1CE4-26D8-43B9-A9C0-9E84F3DBCAA3}"); 
<...>
_m[mIx][6]= RNowMainTreeStyle; 

plus the final call to mm_changeItemProperty(), which -- while changing an item to a tree item -- passes true in its last parameter, forcing mm_changeItemProperty() to call BDMenu() to rebuild the menu. Since the assignment to _m[mIx][6] had already been made at that point, the call to BDMenu() should cause the menu to be built again, with its new menu style... at least that's the idea. In every other case I've tried, when I've changed a menu property either directly or with mm_changeMenuProperty(), a call to BDMenu() forces the visible change in the menu. But for some reason, it's not doing so here. The strange thing is that the direct changes to the other menu properties (item width and orientation) do take effect when BDMenu() is called (hence, the "is should work" feeling). But the new style is being ignored.

Why?

I've tried other approaches to try to rebuild/redraw the menu, including a call to _drawMenu() and assigning to mRef.innerHTML. Nothing. I also tried using the _rbMenus() function that's used inside of mm_menueditapi.js to rebuild the menus after changes are made through the API functions. Again, no luck. So, being out of ideas, I posted an example of my last attempt using _rbMenus() and sent an email to Andy. If you're curious, the example is here. You'll see that the menu is successfully rebuilt when you use the two "test API" links, but not when you try the "change style" links. I figure Andy will take a look and have a solution jump right out of his head, much like Athena from Zeus. I sure hope so, 'cause right now, I'm stumped.

Cheers,

Kevin

[kevin3442]

JFI, I was trying the other menu properties and there are some others that won't allow changing, like margin, followscroll, menuheight.

Hmmm... Just today I was using a "test page" I have for my various mm_changeThisAndThat() type functions, and I can change followscroll successfully with mm_changeMenuProperty(). Haven't tried margin and menuheight. I have done menuwidth though, and that works OK. I'll try margin and menuheight and see what happens.

Cheers,

Kevin

[Ruth]

Thanks, Kevin. I appreciate the explanation.

Ruth

[BigWebGuy]

I've tried other approaches to try to rebuild/redraw the menu, including a call to _drawMenu() and assigning to mRef.innerHTML. Nothing. I also tried using the _rbMenus() function that's used inside of mm_menueditapi.js to rebuild the menus after changes are made through the API functions. Again, no luck.

Kevin, I've tried all those methods too, eventually figuring out they all do the same thing. BDMenu pretty much just encapsulates the _drawMenu() assignment to innerHTML and call to _fixMenu. _rbMenus, depending on the status of the alwaysvisible flag, does the same things.

Hopefully Andy (whom i'm assuming is the guy who wrote the menu) can enlighten us.

Thanks again for all your help.

[kevin3442]

Hi BigWebGuy,

Sounds like we're on the same thought path. All are indeed variations on a theme. Unfortunately, the theme in this case doesn't seem to be helping. Andy is indeed the creator of the menu scripts. If anyone can figure it out, he can. haven't hear back from him yet, but he's typically swamped. I'll shoot another email to him. I now have a personal interest in this one; I hate being stumped!

Cheers,

Kevin

[BigWebGuy]

Hi BigWebGuy,

Sounds like we're on the same thought path. All are indeed variations on a theme. Unfortunately, the theme in this case doesn't seem to be helping. Andy is indeed the creator of the menu scripts. If anyone can figure it out, he can. haven't hear back from him yet, but he's typically swamped. I'll shoot another email to him. I now have a personal interest in this one; I hate being stumped!

Cheers,

Kevin

Kevin, any word back from Andy? I know he's probably busy but i would like to get an answer either way. thanks.

[Andy]

Hi Guys,

Is this the kind of thing you are looking at http://milonic.com/mm_changestyle.php

It's something I was working on a while a go and completely forgot about it (like most things these days )

Anyway, it's in a bit of a mess but it does seem to work. To change the style you need to go "My Milonic" - "Milonic Menu Style" and then choose one of the 4 - They are not exactly like the style it says they are but that should just be a matter of fixing the styles.

Let me know if this is any good and I'll tidy it up a bit.

Cheers,
Andy

[BigWebGuy]

Andy, that's exactly it! (well, except for the mac os and office 2003 styles are switched ).

it doesnt look like quite a mess, but i'll wait till you clean it up. thanks!