problem with flashing menu

[stevemtno]

I'm having a few problems with a I'm working on.

In IE, if I move across multiple navigation bar items, I see each dropdown menu layer in succession. you mouseout, the layer stays up (it should go away).

In FF, the mouseout works sporadically, and depending on how you move from one menu item to the next, you may get a flashing menu layer. It all depends on how you move from one menu item to the next.

Here's a link to the full page so you can see exactly what's going on in the proper context:

http://www.stltoday.com/stltoday/pag...C?OpenDocument

Basically, what I want it to do is be able to go from one 'tab' on the navigation bar to another (not necessarily the one right next to it) and have the one you were on and the one you stop on display its dropdown menu. For example, if you're on the News tab and you go to the Multimedia tab, I only want to see the dropdown menus for those tabs - not the ones in between.

The dropdown menu needs to display when you leave the tab so that you can select things on it. The dropdown menu needs to disappear when you move the mouse off of it.

Any suggestions you may have will be greatly appreciated..... thanks!!

Steve

[Bob90]

You have put a lot of work into the script. Well done so far.

I have a couple of pointers though.
FF works as I would expect. So does IE.

You need to add an .onmouseout() event to close the menu when the mouse leaves the menubar, but you need to stop the previous timeout() if you navigate to another menu title. The .onmouseout() also needs to allow the menu to stay open if the user navigates to the sub menu.

This should be relatively straight forward to implement.

[stevemtno]

You have put a lot of work into the script. Well done so far.

I have a couple of pointers though.
FF works as I would expect. So does IE.

You need to add an .onmouseout() event to close the menu when the mouse leaves the menubar, but you need to stop the previous timeout() if you navigate to another menu title. The .onmouseout() also needs to allow the menu to stay open if the user navigates to the sub menu.

This should be relatively straight forward to implement.

Thanks for the quick reply and compliment, Bob. I'm really a newbie when it comes to JS. Can you elaborate a bit on what to do, or at least point me in the right general direction? I understand the concept of what you're saying, but don't know how to implement it.

I was originally doing this after the onmouseover:

		navNews.onmouseout = function() {
			this.showMenu = false;
			setTimeout(function () {
					document.getElementById("nav-news-sub").style.display = "none";
					return false;
				}
				,500
			);
		}

but then I removed it and went with the additional 'display: none's.

Am I (or was I) close?

Steve

[Bob90]

lets call it a menu bar with menu-items and sub-menus.

This is not functional code

menu-item.onmouseover = function(){
//clear last sub-menu if there was one
clearTimeout(menu.timeout); //make sure no problems occur
hide last sub-menu //hide the menu <-- you code all :)

//set timeout to display menu (unless navigated to sub-menu. See below)
menu.timeout = setTimeout(displayThis(),500);
}

menu-item.onmouseout = function(){
//set timeout to close menu (unless navigated to sub-menu. See below). This will close the menu if the user does not navigate to the sub-menu
menu.timeout = setTimeout(closeThis(),500);
}

menu-item.sub-menu.onmouseover = function(){
//clear timeout of sub-menu
clearTimeout(menu.timeout); //stop sub menu from disappearing
}

[stevemtno]

Bob,

You wrote "you code all ", but I'm not quite sure what I need to do here.

Do I need to have these 4 functions for each menu-item? Should I scrap the existing JS? If you could show me a single menu-item in more detail, I'm sure I'd be able to figure out the rest. Also, can I combine multiple lines of code like you did as opposed to 'breaking them out' like I did with indents, etc?

Sorry for all the probably simple questions, but like I said, I'm a serious JS newbie. Actually, if you could tell me what "menu", "menu-item" and "sub-menu" need to be, that's probably all I need.

Thanks again,

Steve

[Bob90]

So I went a bit fast.

When I said menu bar, menu-items and sub-menu I was referring to your menu system.

As for the functions I meant you have to write the code.

I suggested using four functions that operate on all menu items - you write four functions that can be used by each item.

Indenting code is a good habit in my opinion. So is getting all the spacing correct, but get good at actually coding and the style will come with it.

I don't have time to create an example for you, especially as it would be a solution. If you work with it you will get there.

[stevemtno]

snip..

As for the functions I meant you have to write the code.

That's just it. I don't know how to write the code, that's why I'm here - to learn how.

I suggested using four functions that operate on all menu items - you write four functions that can be used by each item.

snip..

Does that mean I need to repeat the 4 functions for each menu item, or do I somehow call them for each menu item?

I don't have time to create an example for you, especially as it would be a solution. If you work with it you will get there.

I'm not looking for a solution to the whole thing - just one. Telling a newbie to just 'work with it' only causes frustration. I'm very new to JS and don't really understand it at this point. Again, this is why I came to this forum, I'm hoping to learn something...

Any additional help you (or anyone) could provide will be greatly appreciated.

Thanks again,

Steve

[Bob90]

I'll have a look in a couple of days as I am busy at the mo, maybe someone else will be able provide an example or solution.

[stevemtno]

I'll have a look in a couple of days as I am busy at the mo, maybe someone else will be able provide an example or solution.

Thanks, Bob. I'll leave this version of the page as is for now. I've got plenty of other things that need to be done on it.

If I do get a chance to play with it, I'll work locally (don't know if that will happen or not). If I get it to work, I'll post a msg letting you (and anyone else who may be reading this) know what I did.

Steve