ansaurus

Question

Answer 1

A:

Not sure but you might be able to attach an onblur to the window object and that should catch any clicks outside of the document, such as an iframe or even outside the browser. You'll just have to work with that to appropriately function along side the onclick.

XHR 2009-07-28 20:20:21

there is no window on click event..

2009-07-29 18:53:06

Answer 2

+1 A:

I'm not sure why you are looking for mouse clicks. It seems a bit backwards to me. You should consider simply using the onmouseout and onmouseover events for your menu instead.

Here is a quick example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Menu Test</title>
</head>

<body>
         <script type="text/javascript">
            function displayMenu(menuListBlockID, menuTextBlockID) {
                var menuTextBlock = document.getElementById(menuTextBlockID)
                menuTextBlock.style.backgroundColor = "green";
                var menuListBlock = document.getElementById(menuListBlockID);
                menuListBlock.style.display = "block";
            }
            function hideMenu(menuListBlockID, menuTextBlockID) {
                var menuTextBlock = document.getElementById(menuTextBlockID)
                menuTextBlock.style.backgroundColor = "#C00000";
                var menuListBlock = document.getElementById(menuListBlockID);               
                menuListBlock.style.display = "none";
            }
        </script>

        <div id="menu">
            <div id="firstMenuItem" onmouseover="displayMenu('firstMenuItemList','firstMenuItemText')" onmouseout="hideMenu('firstMenuItemList','firstMenuItemText')" style="float:left">
                <span id="firstMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;" >Menu Item 1 |</span>
                <div id="firstMenuItemList" style="display:none;color:White; border:solid 1px green; padding:2px;">
                    <a href="Test.Html">One</a><br />
                    <a href="Test.Html">Two</a>
                </div>
            </div>
            <div id="secondMenuItem" onmouseover="displayMenu('secondMenuItemList','secondMenuItemText')" onmouseout="hideMenu('secondMenuItemList','secondMenuItemText')" style="float:left">
                <span id="secondMenuItemText" style="display:block; background-color:#C00000; color:#FFFFFF;">Menu Item 2</span>
                <div id="secondMenuItemList" style="display:none;color:White; border:solid 1px green;">
                    <a href="Test.Html">Three</a><br />
                    <a href="Test.Html">Four</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Please take note of how I've grouped the menu items. I have a main menu DIV to group all of the menu items together. Each menu item has it's own DIV to group the title for the item and the actual menu links together. The onmouseover and onmouseout events are applied to the menu item block. This means that whenever the end user hovers over anything within the menu item block it will remain open.

Frinavale 2009-07-28 20:27:33

haha that might be a good option

2009-07-28 20:43:52

Well that's how I would do it :)Hope it works out for you!

Frinavale 2009-07-28 20:48:35

Ehhh so I tried to apply that fix you were talking about, no dice. Everytime I try to hover over a anchor tag in the menu it thinks the mouse have moved out of the menu.

2009-07-29 13:25:09

Hmm, try applying the onmouseover to both the anchor tag and the menu? I don't think that this should be necessary though....let me play with a menu for a bit and tell you want I find (what do your links do?)

Frinavale 2009-07-29 15:27:29

It works for me...I've edited my answer to include what I've done to get it to work. See it for an example.

Frinavale 2009-07-29 15:57:12

I'll take a look at that. I'll try to get a sample to post my code. The problem i had was everytime I hovered onto the menu it thought i was hovering off the menu cuz I was on a hyperlink or span or something.

2009-07-29 18:57:30

I think your problem is because you're not applying the onmouseover and onmouseout to the appropriate section. If you apply these to the parent container of the menu item then these events will be applied anything within the container (eg: the hyperlinks). It's really hard to help you when I'm blindly giving you advice. So yeah if you could post some sample code then we can work with that instead of something hypothetical or over simplified like my example.

Frinavale 2009-07-29 19:22:44

ansaurus

tags:

views:

answers:

Javascript Menu OnBlur Issue

related questions