Menu Display Problems

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

Menu Display Problems

Poster: tepidarium
Dated: Sunday October 5 2003 - 4:25:36 BST

I'm having problems getting the Milonic menu to display on a sample page I've created. The page is:
http://www.citytech.cuny.edu/m-menu.html

The "About Us" menu does not display. Oddly, when the top level menu is rolled over the form element at the top of the page changes color and then disappears all together. I know there are issues with form elements displaying on top of dhtml menus, but since this menu comes after the form element in the flow, I don't see why this would be the problem.

Any help would be greatly appreciated. BTW - I am not sure if the javascript I have put in the ehad of the document for the menus is the right javascript - I took it from the sample menu.htm that comes with the milonic sample download.

Thank you all.

Poster: John
Dated: Sunday October 5 2003 - 18:10:29 BST

I'm not seeing the problems you describe. About displays just fine. What I do see is subs on the right side dropping behind the scroller you have in the upper right (above News). OS X/Safari.

In IE5.2.3, Faculty/Staff is behind the scroller, in front of News & Events, and behind the news items themselves (cute!).

In NS7.1, Faculty/Staff is behind the scroller, and in front of both News & Events and the news items.

As if this weren't enough, here's the fun part. Menus come up behind the scroller only if you drop them while the scroller is running. If you drop a sub during the short pause between scrolls it will open on top of the scroller! However, as soon as the scroll starts the menu falls behind again.

Poster: tepidarium
Dated: Sunday October 5 2003 - 20:31:17 BST

Hi Thansk for your response. I'm IE 5, 6 , NS 4, 6, 7, The about us sub menu does not show up. The sub menus for academics, admissions, faculty, students do show up. The quick menu form list becomes obscured on mouseover of menus, so I thought maybe this was the trouble. Are you sure the "about us" menu shows up?

About the menus being obscured...yep, I was aware of this. The scrolling area is flash and below this is an iframe. I guess I'll just have to change this area if I want to implement the menu.

Any help you can give about why the milonic menu is not working properly on this apge and interfering with the Quick Links pulldown menu would be most appreciated!

Thanks all!

Poster: Maz
Dated: Sunday October 5 2003 - 20:44:44 BST

Try putting the menu in the body. If that doesn't work it may be best to avoid placing layered elements where they are likely to overlap.
Regards,
maz

Poster: tepidarium
Dated: Sunday October 5 2003 - 21:14:21 BST

Hi - when you say to "put the menu in the body" do you mean to place all of the javascript code that I have currently in the head of the document in the body area...or are you referring to something else?

I have the menu set at "position=relative" to flow in the document. Any clue as to why the quick links form element which occurs earlier in the flow of the document should be affected? - I.E. as you scroll over the menu, look at the quicklinks form element at the top right of the page, it disappears...

Poster: John
Dated: Monday October 6 2003 - 2:35:37 BST

tepidarium wrote:

Are you sure the "about us" menu shows up?

Old - yes. Blind - not quite yet :!:

It's there, with 8 subs.

tepidarium wrote:

...when you say to "put the menu in the body" do you mean to place all of the javascript code that I have currently in the head of the document in the body area

Yes, that's what she means. In theory it should work in either area, but some of us have better luck with the menu calls as the first items in the <body> (putting the data call wherever is necessary in your design situation).

tepidarium wrote:

Any clue as to why the quick links form element which occurs earlier in the flow of the document should be affected? - I.E. as you scroll over the menu, look at the quicklinks form element at the top right of the page, it disappears...

Here we go again... I went over every menu and sub up there, and the Quick Link popup was rock solid. It didn't blink once.

All this with Safari, which can be very fussy.

Poster: tepidarium
Dated: Monday October 6 2003 - 5:07:24 BST

JGillet -Thank you for your response...

jgillett wrote:

tepidarium wrote:

Are you sure the "about us" menu shows up?

Old - yes. Blind - not quite yet :!:

It's there, with 8 subs.

I am quite troubled by this. I have looked at this menu on three different computers -- when viewing in Internet Explorer 6 - the "About Us" menu does not show up, and when rollover any part of the menu, the quick links form element either disappears or becomes obscured. Are you using IE 6?

Strangely, the menu displays correctly in NS 4x (a first!) - however, in NS 4x, the menu apears outside of the flow of the document at the top of the page while the page is loading. Upon complete loading of the page, the menu is in the proper flow of the document.

tepidarium wrote:

...when you say to "put the menu in the body" do you mean to place all of the javascript code that I have currently in the head of the document in the body area

jgillett wrote:

[Yes, that's what she means. In theory it should work in either area, but some of us have better luck with the menu calls as the first items in the <body> (putting the data call wherever is necessary in your design situation)..

I will try this when I get back to work

tepidarium wrote:

jgillett wrote:

Here we go again... I went over every menu and sub up there, and the Quick Link popup was rock solid. It didn't blink once.

All this with Safari, which can be very fussy.

It just doesn't work in IE 6 for me...on three differnet machines :cry:

I can't see what the problem would be...

Poster: tepidarium
Dated: Monday October 6 2003 - 5:17:20 BST

This is the code I am using in the head of my document. Is this correct? Thank you again.

<script language=JavaScript src="http://www.citytech.cuny.edu/mmenu/milonic_src.js" type=text/javascript></script>

<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://www.citytech.cuny.edu/mmenu/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=http://www.citytech.cuny.edu/mmenu/mmenudom.js><\/scr"+"ipt>");
</script>

Poster: John
Dated: Monday October 6 2003 - 5:46:54 BST

tepidarium wrote:

JGillet -Thank you for your response...

You're welcome.

tepidarium wrote:

Nope. Look back a few messages. You'll see OS X (Mac), and 3 browsers listed with the version numbers.

tepidarium wrote:

Strangely, the menu displays correctly in NS 4x (a first!) - however, in NS 4x, the menu apears outside of the flow of the document at the top of the page while the page is loading. Upon complete loading of the page, the menu is in the proper flow of the document.

Gads, give that user a gold trophy :!:

I wouldn't worry at all about how NS4 displays while loading. It's the finished product you're concerned about.

tepidarium wrote:

It just doesn't work in IE 6 for me...on three differnet machines :cry:

I can't see what the problem would be...

Don't have Windoze here at home to try it on. Will try to remember to look when I get to work tomorrow (where I'm stuck with XP Pro).

Poster: kevin3442
Dated: Monday October 6 2003 - 6:51:08 BST

I can add a little...

IE6/Win2k: When I mouse over the About Us main menu item, (a) the About submenu does not drop and (b) the Quick Links field changes appearance; sort of changes to a plain text edit field with a different colored background. When I mouse out of the About menu item, the Quick Links field reverts to its normal appearance very briefly, then disappears altogether. Very odd indeed.

NS7/WIn2k: The About Us menu functions properly and the Quick Links field is unaffected. But, the overall appearance of the page is different. In IE, the banner area at the top (with the Flash) and the menu are about the same width, and the content area at the bottom is not as wide. In NS7, the banner area above the menu and content area below the menu are the same width, but the menu sticks out too far ro the right (the entire Home item is outside the right boundary). It's as if the menu is the same width as in IE, but the banner area is narrower.

NS4.75/WIn2k: The overall appearance is similar to that in IE6 (wider banner area + menu, narrower content area below menu). The menu's width nicely matches the width of the banner area above it. The About Us menu functions fine and the Quick Links field is unaffected. But, the flash in the content area, beneather the "Students", "Search", etc. menujs, doesn't show anything... no scrolling content. The submenus drop behind this flash, but that's nothing new or unexpected (there are some ways around this problem... like hiding the flash when the menus drop). And, of course, the iframe is no good in NS4, but you already knew that. I'm guessing that the reason the main menu appears at the top first, then moves to its final destination is that you have Top=10 and Left=10 in your Main Menu. So that's where the menu first renders before moving into the table where you want it (remember, compared to other elements, these menus appear so quickly that they are often the first visible element on the page). It probably happens that way in every browser, but most of them load the page too quickly for you to notice (try doing it over a slow dialup, then you may see the effect in other browsers). There are some ways around this visual effect if it bothers you.

Opera6.05 and 7.2/Win2k: The Main Menu did not appear at all until I reloaded tha page. Once it was all there, the About Us menu functioned properly and the Quick Links field was unaffected. Submenus drop behind both the flash amd the iframe in the content area below the menu, but again, this is common for embeded objects in Opera 6.

So, that's what I see. Why the weirdness with IE6? Don't have a clue yet, but I suspect it may have something to do with how you've put the menu in a table... no evidence yet, but just a gut feeling. The sample of how to bind a menu to a table cell is a bit different than how you've done it, and it does mention that odd things can happen when loading the entire set of menus into a table cell, especially in a page with a complex table structure (both of which would seem to be the case for your page). I think its worth mentioning that you could probably achieve the menu placement that you're going for without having to put the menu in a table. I might dig around a bit more and see what I can see.

Hope that helps,

Kevin

Poster: John
Dated: Monday October 6 2003 - 14:55:13 BST

Stuck back at work with my miserable Windoze box, and now I'm seeing what you have described (XP Pro/IE6). Very strange. I don't see anything in your code, but I do suspect some kind of interaction with all the JS you have on the page. Nothing for sure yet.

Poster: tepidarium
Dated: Monday October 6 2003 - 16:13:00 BST

Kevin3442 & jgillet - I thank you for your in depth and continued responses. I really appreciate your help.

I have made a new page where I have made some changes.

1. I removed the quick links form element and now the menu works fine. This isn't a solution though because the form element needs to appear on every page. (I can't believe that the form element and Milonic Menus cant coexist on the same html page) The form element is a Project Seven -
http://www.projectseven.com extension - Jump Menu Magic. I have experimented with removing other possible offending javascript -i.e. the date function (top left of page) the random image inserter - only upon removal of the pulldown menu will the Milonic menu fully work...

2. I removed the flash scroller and the frame just to avoid confusion - I know that in some browsers the menus will drop behind these embedded content, I just thought I'd tackle that problem when I came to it.

The URL for these changes is:
http://www.citytech.cuny.edu/m-menu2.html

The URL with the Form element at the top is:
http://www.citytech.cuny.edu/m-menu.html

The table width issue hopefully will not be a problem. I have defined itemwidth properties for all items in the main menu (doesn't seem to be a parameter to define the width of the actual menu) If I can get the menu working, I will apply for a license - and when the "Milonic Menu" button is removed, The total width of the table should be exactly 750px which will equal the other tables.

Also, if you have any more insight about how to more efficiently place the table into the flow of the document - if I have not done it efficiently, any hint would be appreciated.

If you have any further insight about this troubling form element problem please let me know. Thank you all again for your time.

Poster: kevin3442
Dated: Tuesday October 7 2003 - 5:58:58 BST

Hi Again,

I started playing with your page, then I noticed you had posted a test page... much easier to play with

. I had thought the problem might be a side effect of sourcing your menu_data.js file into a table cell; essentially placing all of your menus inside a table cell. Only reason this occurred to me (recall, I said I had a "gut feeling") is that weird things seem to happen sometimes when you put large scripts inside tables... I have no idea why. I took a look at the sample page for binding a menu to a table (sample 9); the following caught my attention:

Quote:

If you are experiencing problems with relative menu positioning however, try and embed only the menu you want to be included within the table cell. Embedding whole menus is possible but can cause unpredictable results in complex table structures.

You have embedded your entire set of menus in one cell, and the odd behavior on your page certainly seems aptly described by "unpredictable results." So I thought, what the heck, and I tried your menu structure as outloined in the sample: by defining only submenus in the menu_data.js file (no main menu) and loading that in the <head>, then putting just the "Main Menu" in the table cell; scripted right in the html file. No mo' problem!

I've zipped your test page and menu_data.js file and put them here; download it and have a look... I'm sure you'll see the few changes here and there. I'll leave it up until you get it... please let me know when you download it, so I can remove it from my server.

Cheers,

Kevin

and saw that you follow a different method than the one given in the sample

Poster: tepidarium
Dated: Tuesday October 7 2003 - 15:23:19 BST

Kevin3442 - Thank you very much for your help on this. I downloaded the zip file, and everything appears to work as you outlined it. I was confused by the statemnet to put only one menu in the cell...the distinction between the upper level menu and sub menus were lost on me. I guess I keep thinking of the structure as heirarchical with one depending on the other - but the are individual menus.

kevin3442 wrote:

So I thought, what the heck, and I tried your menu structure as outloined in the sample: by defining only submenus in the menu_data.js file (no main menu) and loading that in the <head>, then putting just the "Main Menu" in the table cell; scripted right in the html file. No mo' problem!

The javascript was actually loaded right after the <body> tag in the script you created. Is the javascript I am running on test1.html, the right way to call the menus? I've looked at several different pages running Milonic menus and the javascript used to call the menus seems to vary. I got that script from the sample menu page that I downloaded with the Milonic sample. Also, I noticed that you included commented tages </--p--> - should these stay?

In the area of the page where the main menu is embedded in the table, you added as a comment


Does this have to stay or is this just for illustrative purposes (sorry for the stupid questions, I'm just a bit out of my element!)

kevin3442 wrote:

and saw that you follow a different method than the one given in the sample

Really? Are there other ways to anchor to table cell?

Once again thank you for your help on this!

Poster: tepidarium
Dated: Tuesday October 7 2003 - 15:27:41 BST

I've put up a current version of the menu embedded in the page -

http://www.citytech.cuny.edu/m-menu3.html

I've got the commented fields included in the file.

I am currently trying to find the correct code to make the flash object and iframe directly under the right hand portion of the menu dissappear when menu is rolledover

Poster: John
Dated: Tuesday October 7 2003 - 16:04:16 BST

Tep, always use the calling code as contained in the download you get. Andy changed it recently (and Kevin sent you the right stuff, of course!), and if you don't keep an eye out you're likely to miss things.

Likewise, always take a quick glance at the menu_data.js contained in the Milonic download. That, too, can contain some subtle changes, again as was shown about 5 or 6 RCs back.

Frankly, I've never been able to get Andy's table example to work. I always put the main calls just after the <body>, and then a single call to the data file in the proper <td> (if it's table-bound). I have no actual JS from the menu on the page. Seems to do just fine.

Stick with us. You've now got the best DHTML menu there is, and the final is very close.

Poster: tepidarium
Dated: Tuesday October 7 2003 - 16:20:36 BST

jgillett wrote:

Frankly, I've never been able to get Andy's table example to work. I always put the main calls just after the <body>, and then a single call to the data file in the proper <td> (if it's table-bound). I have no actual JS from the menu on the page. Seems to do just fine.

I would have liked to have the single call in the proper <td> without actually defining the menu in the html page - but it seems that it just won't work without obscuring the form element. Kevin's solution, as outlined in the tablebound example - where the main menu code is physically placed on the page seems to be the only way I can implement the menu. This is unfortunate because the site is html based w/dreamweaver templates, but I can live with it.

jgillett wrote:

Stick with us. You've now got the best DHTML menu there is, and the final is very close.

Do you think I should wait for the final release or implement this version - I say this, because I'm working in a system where I will manually need to make large scale changes.

Thank you for your continued responses. I am going to apply for a license for my School.

Poster: John
Dated: Tuesday October 7 2003 - 16:42:46 BST

I noticed you were using Dreamweaver. Can't do any better than that. Did you get the new 2004 MX? Hot stuff!

I don't use templates here, mainly because I'm the only guy who touches any of the pages in the entire Student Affairs system (400+). For any repeating-code items I just use includes. Seems easier that way.

As for waiting, we're extremely close to final, and I really don't see any more major changes as far as calls, etc., coming down. Of course I could be wrong, but I think Andy is now concentrating on the last few bugs and that's it.

There was another RC15 posted last night - Built: October 6, 18:16 - just in case. Personally, I keep up with the releases. Every once in a while he sneaks something in there that he 'forgets' to tell us, and that makes one less bug to 'bug' him about!

Poster: kevin3442
Dated: Tuesday October 7 2003 - 18:17:13 BST

tepidarium wrote:

Kevin3442 - Thank you very much for your help on this.

You're welcome. Glad to help.

Quote:

The javascript was actually loaded right after the <body> tag in the script you created.

Oops... you're right, the scripts are in the <body>. I guess I just assumed they were in the <head>. Guess I should pay more attention. But the other moral of the story is that they work when placed in the <body> as well. I've been putting mine in the <head> as per the examples, but I've read that some people have better luck sourcing the scripts into the <body>.

Quote:

Is the javascript I am running on test1.html, the right way to call the menus?

Looks good to me.

Quote:

Also, I noticed that you included commented tages </--p--> - should these stay?

In initial testing, I wasn't sure why you had the <script> loading lines inside a paragraph, so I just commented those out because I didn't see the need for them. I generally try to avoid putting scripts inside anything that they don't need to be inside. You'll probably notice that there is no visual effect of removing these tags, so they are not needed.

Quote:

In the area of the page where the main menu is embedded in the table, you added as a comment
 Does this have to stay or is this just for illustrative purposes

I was just commenting out the line you had originally used to load the entire set of menus into the table cell. I left it there for two reaons: (1) It's a common practice when debugging just to comment out code, rather than delete it. That way, the commented code is inert when you test, but it can easily be reinstated later simply by uncommenting it (don't have to retype it that way). (2) It was, as you say, for illustrative purposes, so you could see where the changes were made. You don't need to leave it in.

Quote:

sorry for the stupid questions, I'm just a bit out of my element!

As John is fond of saying, the only stupid question is the unasked question. This is how all of us learn and there certainly is no shame in learning.

Cheers,

Kevin

Poster: tepidarium
Dated: Tuesday October 7 2003 - 18:21:18 BST

Once again, a big thank you to Kevin and John. You have really helped me.

Kevin, I have a question regarding your Flash object hide function. I searched the forums and I downloaded it. I will post this question in a new thread.

I am feeling a bit more confident about making the main menu of the site in Milonic.

Poster: kevin3442
Dated: Tuesday October 7 2003 - 18:28:05 BST

Quote:

Ah... but there are usually alternatives! Try this: instead of embedding the Main Menu script in the html page, put it in a .js file. Maybe call it main_menu.js! Then, in your <td>, load the main_menu.js file like you had been doing with menu_data.js; so you're loading the main_menu.js into the table. "But wait!" you say... "I thought it wasn't cool to load those scripts in a table!" Well, I think the size of the script file has something to do with the odd behavior; smaller ones seem to do OK. I tried this approach with your earlier test page, and it worked fine. You can download the example here. You'll notice that I removed the commented code and placed the menu scripts in the <head> (but in the body should also work). Again, please let me know when you've downloaded it.

Hope that helps,

Kevin

Poster: tepidarium
Dated: Tuesday October 7 2003 - 18:39:54 BST

Kevin, That is awesome! I jut downloaded it and it works exactly as you described...now, I only need edit the one main menu js file if I need to augment it...so it won't have to be hard wired into the page! Thanks!

Industrial Strength JavaScript and DHTML Menus

Menu Display Problems