OnMouseOver SubMenu not showing in Firefox

Question

I have a submenu that appears when you put the mouse over the menu, is properly working in Chrome and in IE but is not working on Firefox.

Here's where the function to show the sub menu is called.

<div id="nav1">
    <table>
        <tr>
            <td style="width: 400px;" class="navItem" 
                onmouseover="showSubMenu(this, 'subMenu1');">
            </td>

        </tr>
    </table>
</div>

<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();">
       {code to show the  list of options }
</div>

and here's the function that shows and hide the sub menu

 function showSubMenu(pCell, pSubMenu){
    var subMenu = document.getElementById(pSubMenu);
    var unionCell = document.getElementById("unionCell");
    var offsetElem = pCell;
    var offsetTop = null;
    var offsetLeft = null;

    while (offsetElem.parentNode){

        if (offsetElem.tagName != "DIV"){
            offsetTop += offsetElem.offsetTop;
            offsetLeft += offsetElem.offsetLeft;
        }

        offsetElem = offsetElem.parentNode;
    }

    pCell.className = "hover"

    subMenu.style.left = (offsetLeft) + "px";
    subMenu.style.top = (offsetTop + pCell.offsetHeight - 1) + "px";

    subMenu.style.display = "block";

    activeMenu = pCell;
    activeSubMenu = subMenu;

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

function hideSubMenu(){

    var subMenu = activeSubMenu;

    subMenu.style.display = "none";
    activeMenu.className = "navItem";

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

function cancelBubble(){
    if (window.event){
        window.event.cancelBubble=true;
    }

The submenu appears and hides correctly in IE and Chrome, but is not showing in Firefox

here's the complete html

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div id="document">
<div id="head" class="headerBackground_Local">
<div id="nav1">
<table>
<tbody>
<tr>
<td class="navItem" style="width: 200px;">
<td style="width: 100px;"></td>
<td class="navItem" onmouseover="showSubMenu(this, 'subMenu1');" style="width: 400px;">
<td style="width: 10px;"></td>
<td class="navItem" style="width: 50px;"></td>
<td style="width: 100px;"></td>
<td class="navItem" style="width: 100px;"></td>
<td style="width: 135px;"></td>
</tr>
</tbody>
</table>
</div>
<div id="subMenu1" class="nav1SubMenu" onmouseover="cancelBubble();" style="left: 274px; top: 129px; display: none;">
<table cellspacing="0" cellpadding="0" border="0">
</div>
<div id="fade" class="overlay"></div>
<div id="dialogWin" class="floatWin">
</body>
</html>

@mplungjan I edited the question to show the complete html page — jose, Dec 26 '14 at 20:54
Seems you only stop propagation in ie by testing window.event which is not available in fx — mplungjan, Dec 26 '14 at 23:20
@mplungjan what can I use instead of 'window.event'? so it can be available for fx too — jose, Dec 26 '14 at 23:48
I gave you the search term - http://stackoverflow.com/questions/2029654/jquery-firefox-stoppropagation — mplungjan, Dec 27 '14 at 06:25

score 0 · Accepted Answer · answered Dec 26 '14 at 21:15

0

The submenu has been shown normally in Firefox. The problem is that hideSubmenu function is also called right after. It's a good idea to check who is triggering the event before hide.

something like:

function hideSubMenu(e){
    if (e.target instanceof HTMLTableCellElement) return;
    var subMenu = activeSubMenu;

    subMenu.style.display = "none";
    activeMenu.className = "navItem";

    cancelBubble();
    document.getElementById("document").onmouseover = hideSubMenu;
}

answered Dec 26 '14 at 21:15

nanndoj

6,580
7
30
42

thanks, the sub menu is now displayed, but after is displayed, if I want to select an option from that sub menu, it dissapears like if the submenu looses the mouse focus, and in the other browsers is working normally – jose Dec 26 '14 at 21:21
you always have to test the target. You may test if the target has the specyfic ID, so you hide. (e.target.id != "document") – nanndoj Dec 26 '14 at 21:34
the test has to be done inside the hideSubMenu or in the cancelBubble? – jose Dec 29 '14 at 16:50
I guess inside hidemenu! – nanndoj Dec 29 '14 at 16:57

OnMouseOver SubMenu not showing in Firefox

1 Answers1