Javascript menues remain visible even though mouse is not over them

F

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: (e-mail address removed)
 
K

kaeli

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
 
K

kaeli


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','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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. ;)


--
 
F

fernandoronci

kaeli said:
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','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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.
('producto','','hide','productos','','hide','aguadas','','hide','australiano'
,'','hide','comederos','','hide','bebederos','','hide','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=http://www.sola.com.ar/prueba/home.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
 
K

kaeli

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=http://www.sola.com.ar/home.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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top