Menu Display Problems

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Menu Display Problems

Post by tepidarium »

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.
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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!
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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...
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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: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...
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...
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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/mmen ... /scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=http://www.citytech.cuny.edu/mmenu/mmen ... /scr"+"ipt>");
</script>
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

tepidarium wrote:JGillet -Thank you for your response... :)
You're welcome.
tepidarium wrote: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?
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).
John
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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:
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
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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--></--p--> - should these stay?

In the area of the page where the main menu is embedded in the table, you added as a comment
<!--script language=JavaScript src="menu_data.js" type=text/javascript></script-->

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!
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
John
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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.
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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!
John
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

tepidarium wrote:Kevin3442 - Thank you very much for your help on this.
You're welcome. Glad to help.
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>.
Is the javascript I am running on test1.html, the right way to call the menus?
Looks good to me.
Also, I noticed that you included commented tages <!--p--></--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.
In the area of the page where the main menu is embedded in the table, you added as a comment
<!--script language=JavaScript src="menu_data.js" type=text/javascript></script--> 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.
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
tepidarium
Mega User
Mega User
Posts: 169
Joined: Sun Oct 05, 2003 4:21 am

Post by tepidarium »

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.
Post Reply