Forum Moderators: open

Message Too Old, No Replies

Trying to get menu to close with a click outside the menu

         

Jeremy_H

4:38 pm on Apr 17, 2006 (gmt 0)

10+ Year Member



I have a great little menu I've been working on that opens when you click on a special link. It shows several links related to that word.

It use to be if the user click on the special link, but decided they didn't want to click on any other links, the only way to close the menu was to click on the special link once more.

I added a line of code that has the menu close if the window has been re-sized. Which is great.

However, I would like to also add a line of code that will close the menu if anywhere outside the menu was clicked.

I tried window.onclick, but that would close the menu as soon as it would open, so that didn't work.

I also tried window.onblur, but that only works if the user clicks out of the browser, and then back into the browser.

I also tried document.getElementById("ml").onblur and window.document.getElementById("ml").onblur, but that didn't seem to word either.

Any advice? Thanks

Jeremy_H

5:48 pm on Apr 28, 2006 (gmt 0)

10+ Year Member



Might anyone have any suggestions? I've since continued to try to fix this problem, but I haven't been able to make it work yet. I don't know which direction I should move.

Any advice would be much appreciated. Thanks.

Moby_Dim

6:35 pm on Apr 28, 2006 (gmt 0)

10+ Year Member



Have you tried to play with DOM 'target' property?

Jeremy_H

7:08 pm on Apr 28, 2006 (gmt 0)

10+ Year Member



Thanks Moby, looks like event.target holds some promise.

I'm now experimenting with this trigger, and I have code that looks like this:

window.onclick=function(){if(event.target==document.getElementByTagName("img")){document.getElementById("s").style.visibility="hidden";}}

This isn't exactly what I'm trying to get at, but I'm trying to get a statement that works.

I'm thinking that it says this:

If a click is made inside the window, then if that click is on an image tag, then set the visibility the id=s to hidden.

In theory that's what the code should do, right?

Thanks anyone for their input on this.

mehh

7:37 pm on Apr 28, 2006 (gmt 0)

10+ Year Member



Hi

i Had a simmeler problem i one of my scripts.i settled with document.onclick=new Function("hide()");
in the end.

i didnt try this though. put all the html for the page in a DIV tag with an event handeler e.g

<body>
<div id="page" onclick="hide()">
<!--html hear-->
</div><div id="menu">
</div>
</body>

and then just dynamicly write to the div menu

Moby_Dim

8:22 pm on Apr 28, 2006 (gmt 0)

10+ Year Member



>>... looks like event.target holds some promise.
>>

I do not know (did not see your code and the problem itself).

But there are other ways too i suppose. A simple solution imho is : set a global variable as a flag. Default value = 0, for example. The link click event checks this flag and opens menu and sets the flag = 1; any other location click closes the menu, if the flag is 1, and restores the default value. Try this.