Javascript menues remain visible even though mouse is not over them

[fernandoronci]

Hi,

I've been given the task of mantaining and fixing a website which I
didn't design.
I'm using Internet Explorer 5.5 and 6.x.
Specifically, the problem is that navigation menues (written in
javascript) don't disappear when the mouse moves outside of the area of
the menues (some of the menues are nested two and three levels). As
long as the mouse cursor remains *within* the options of the menues,
the option under the mouse cursor is highlighted and the corresponding
sub-menu is displayed. If the mouse pointer then moves over another
option of the menu then the former sub-menu hides, the new option is
highlighted and its corresponding sub-menu is displayed, or, in case of
a nested sub-menu, the corresponding sub-menu is displayed. So far so
good.
As I said before, the problem arises when the mouse pointer moves *out*
of the menu area. In this case, the last menu + sub-menu (if available)
+ sub-sub-menu (if available) remain visible treading any underlying
content, instead of auto-hiding after half a second, for example, as is
the case of all well designed websites.
As far as I could find out, the original programmer used some
third-party tool to design the menues, and the javascript code was
automatically generated by that tool. By the way, the code
is not readable at all and there are no comments to make things easier.
I see onMouseOver="MM_swapImage(... , MM_showHideLayers(... ,
onMouseOut="MM_swapImgRestore()" , onMouseOver="MM_swapImage(... and
onMouseOut="MM_swapImgRestore()" all over the place, but I didn't find
any options to set some sort of timeout to hide menues when the mouse
cursor moves out of their scope.
I have some programming background, but not in Javascript specifically,
and thus I haven't been able to figure out a workaround for this. So,
my question is: What do I have to modify in the javascript code to give
menues the capability of hiding when the mouse cursor is not over them
anymore ?

Thank you in advance.

Fernando Ronci
E-mail: fe***********@hotmail.com

[kaeli]

In article <11**********************@z14g2000cwz.googlegroups .com>,
fe***********@hotmail.com enlightened us with...

I'm using Internet Explorer 5.5 and 6.x.
I'm sorry.
You did test this in Firefox, right? Some of us don't use MSIE. ;)
I see onMouseOver="MM_swapImage(... , MM_showHideLayers(... ,
Macromedia generated code.
What do I have to modify in the javascript code to give
menues the capability of hiding when the mouse cursor is not over them
anymore ?

I have a .net app that just won't talk to the database. The grid displays,
but it's empty. What's wrong with it?

(hint: we need to SEE the CODE. *heh*)

Got URL?

--
--
~kaeli~
Not one shred of evidence supports the notion that life is
serious.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[fernandoronci]

kaeli wrote:

(hint: we need to SEE the CODE. *heh*)

Got URL?

I set up a temporary URL at http://www.sola.com.ar/prueba/home.html

For example, you can go to "Productos" | "Piscinas" then move the mouse
cursor out of the menues and you'll see they still remain visible.

(I haven't installed Firefox yet to test the issue).

Thank you.
Fernando

[kaeli]

In article <11**********************@g14g2000cwa.googlegroups .com>,
fe***********@hotmail.com enlightened us with...

kaeli wrote:

(hint: we need to SEE the CODE. *heh*)

Got URL?

I set up a temporary URL at http://www.sola.com.ar/prueba/home.html

This page is completely FUBAR in IE6. The submenu doesn't even appear in the
right spot.

It actually works better in Firefox than IE.

That said, you have nothing being called to hide the menu.
<td width="106" align="left" valign="top"><a
href="javascript:;" onMouseOver="MM_showHideLayers
('producto','','show','productos','','hide','aguad as','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide','
reservorios','','hide')"><img src="botones%20tira/home.jpg" width="106"
height="21" border="0"></a>

<td width="148" align="left" valign="top"><a
href="javascript:;" onMouseOver="MM_showHideLayers
('producto','','show','productos','','hide','aguad as','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide','
reservorios','','hide')"><img src="botones%20tira/beneficios.jpg"
width="148" height="21" border="0"></a></td>

See, you have no onmouseout. The function MM_showHideLayers is called to hide
layers when the image is moused over, but it never hides them when THIS loses
mouse unless you add an onmouseout handler.

You have this, but it's missing an ending tag, which will kill browsers.
<td><a href="javascript:;"
onMouseOver="MM_swapImage('Image10','','botones%
20tira/productos/aguadas/australianos/logistica1.jpg',1)"
onMouseOut="MM_showHideLayers
('producto','','hide','productos','','hide','aguad as','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide','
reservorios','','hide')"><img src="botones%
20tira/productos/aguadas/australianos/australiano1.jpg" width="107"
height="21" border="0"

Note the last ">" is missing.

You can catch a lot of problems if you actually validate your html.
You have a SHITLOAD of HTML errors. ;) http://validator.w3.org/check?uri=ht...ba%2Fhome.html

--
--
~kaeli~
Join the Army, meet interesting people, kill them.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[fernandoronci]

kaeli wrote:

This page is completely FUBAR in IE6. The submenu doesn't even appear in the right spot.

It actually works better in Firefox than IE.

That said, you have nothing being called to hide the menu.
<td width="106" align="left" valign="top"><a
href="javascript:;" onMouseOver="MM_showHideLayers
('producto','','show','productos','','hide','aguad as','','hide','australiano' ,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide',' reservorios','','hide')"><img src="botones%20tira/home.jpg" width="106" height="21" border="0"></a>

<td width="148" align="left" valign="top"><a
href="javascript:;" onMouseOver="MM_showHideLayers
('producto','','show','productos','','hide','aguad as','','hide','australiano' ,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide',' reservorios','','hide')"><img src="botones%20tira/beneficios.jpg"
width="148" height="21" border="0"></a></td>

See, you have no onmouseout. The function MM_showHideLayers is called to hide layers when the image is moused over, but it never hides them when THIS loses mouse unless you add an onmouseout handler.

You have this, but it's missing an ending tag, which will kill browsers. <td><a href="javascript:;" onMouseOver="MM_swapImage('Image10','','botones%
20tira/productos/aguadas/australianos/logistica1.jpg',1)"
onMouseOut="MM_showHideLayers
('producto','','hide','productos','','hide','aguad as','','hide','australiano' ,'','hide','comederos','','hide','bebederos','','h ide','picsinas','','hide',' reservorios','','hide')"><img src="botones%
20tira/productos/aguadas/australianos/australiano1.jpg" width="107"
height="21" border="0"

Note the last ">" is missing.

You can catch a lot of problems if you actually validate your html.
You have a SHITLOAD of HTML errors. ;)

http://validator.w3.org/check?uri=ht...ba%2Fhome.html

Thank you for your support Kaeli.

I fixed some inconsistencies, but the problem still persists.
For example, I completed the missing parts "></a></td>" (without the
quotes) in the line you mentioned in your last reply, and removed all
those inconsistent id's spotted by the W3C validator.

The angle bracket count is exactly 433, both for < and >, meaning that
for every < there's a matching closing >.
Also, there are 45 onMouseOver's and only 37 onMouseOut's, although I'm
not sure if there must be a matching onMouseOut for every onMouseOver.

At this point, I cannot tell if the code is still flawed (after fixing
the issues spotted by the W3C validator) or it simply is not MSIE
friendly.
I did a test with an old version of Netscape Communicator (v. 4.7 more
precisely) and it triggered an illegal operation in PR3240.dll even
before beginning to render the objects.

Is there anything left to try to get rid of the menues when the mouse
gets out of their screen area ?
Thanks again,

Fernando

[kaeli]

In article <11**********************@l41g2000cwc.googlegroups .com>,
fe***********@hotmail.com enlightened us with...

Is there anything left to try to get rid of the menues when the mouse
gets out of their screen area ?

I'm getting 404 for http://www.sola.com.ar/prueba/home.html.
Did you move the file somewhere?
--
--
~kaeli~
With her marriage, she got a new name and a dress.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[fernandoronci]

kaeli wrote:

I'm getting 404 for http://www.sola.com.ar/prueba/home.html.
Did you move the file somewhere?

Sorry.
It happens that I'm not the only one logging into that HTTP server ...
The stuff is at http://www.sola.com.ar/

Thanks.

Fernando

[kaeli]

In article <11**********************@f14g2000cwb.googlegroups .com>,
fe***********@hotmail.com enlightened us with...

kaeli wrote:

I'm getting 404 for http://www.sola.com.ar/prueba/home.html.
Did you move the file somewhere?

Sorry.
It happens that I'm not the only one logging into that HTTP server ...
The stuff is at http://www.sola.com.ar/

You know that clicking on English Version does nothing, right?

And looking at this code make me think the buttons are also supposed to be
rollovers. They aren't swapping, but I get no errors. That usually means
horribly invalid html that confuses the browser.

And the page is still all messed up, layout-wise as well as where the menu
goes, in IE6. Checking the validator...you still have a crapload of errors.

http://validator.w3.org/check?uri=ht...ar%2Fhome.html

The page MUST VALIDATE. Missing alt attributes is one thing. You've got
things already defined and a bunch of other errors, too.

And you're still missing onmouseout for your menus.

I can't give you fixed code. I don't have all the images sitting here in the
right spot and everything else to play with, and I don't have quite that much
free time to download them all and set up a test environment.
Go fix your html. Get it to validate.
Add the onmouseout calls EVERYWHERE the onmouseover code calls your menu.
onMouseOver="MM_showHideLayers...
onMouseOut...

--
--
~kaeli~
Persons disagreeing with facts are always emotional and
employ faulty reasoning.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace