JavaScript change-content-and-scroll menu bug somewhere

Question

This question is a follow-up on a previous question I asked (with a different twist):

I'm uncertain how to aptly describe my question: It's a bug, that just needs debugging.

Here's my jsFiddle: http://jsfiddle.net/Wagtail/b6Juh/18/

I need to be able to scroll over Item A, Item B, and Item C instead of just having disappear entirely when my mouse leaves Item A. Why is this happening anyway?

Here's the JavaScript, HTML, and CSS codes copied over for your convenience:

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table>

CSS Code:

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5%  0px 5%%;vertical-align:middle;}
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;}
#headMenu td:hover{background:rgb(162,200,240);}
#subMenu td:hover{background:rgb(210,230,170);}

JavaScript Code:

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

Thanks in advance to any answers! If you need clarification, I'll be happy to reply.

[droline menu](http://www.cssmenus.co.uk/dropline.html) (click bottom links to download) — khaled_webdev, Jun 08 '12 at 16:29

score 1 · Accepted Answer · answered Jun 08 '12 at 16:31

1

Your subMenu.onmouseout function is being triggered as the mouse moves from one of the submenu table cells to another. One simple way to fix this is to add another timeout for moving between the cells.

I've updated your jsfiddle example to show what I mean:

http://jsfiddle.net/b6Juh/22/

answered Jun 08 '12 at 16:31

John Lawrence

2,923
17
23

This could work if I wasn't so picky, but now there is a problem when I want to scroll back up to "Item 1". – zdebruine Jun 08 '12 at 17:08
1

I think adding another clearTimeout should fix that. [http://jsfiddle.net/b6Juh/26/](http://jsfiddle.net/b6Juh/26/) – John Lawrence Jun 08 '12 at 17:18

JavaScript change-content-and-scroll menu bug somewhere

1 Answers1