PDA

Click to See Complete Forum and Search --> : Element not disappearing on onUnFocus

Paul Jr
11-13-2003, 12:13 AM
I decided to try and get into some Java Script menu stuff, 'cause I haven't had much experience, and I thought it would be fun, and I've always wanted to. Well, I ran into a snag. This works almost fine, except that I want the submenu to go away either after a short while, or when you click on another part of the page.


<html><head><title>Test</title>
<script type="text/javascript">
function display(itemId) {
itemId = document.getElementById(itemId);
if (itemId.style.visibility == "hidden") {
itemId.style.visibility = "visible";
}else{
itemId.style.visibility = "hidden";
}
}
</script>
<style type="text/css">
#main {
width:420px;
border:3px ridge #F00;
border-bottom:transparent;
padding:10px;
margin:0px;
text-align:center;
}
a:link,a:visited {
height:25px;
background-color:#BDBDBD;
text-decoration:none;
padding:2px 10px 2px 10px;
margin:0px;
color:#626262;
border:1px solid #000;
}
a:hover {
background-color:#626262;
text-decoration:underline;
color:#BDBDBD;
}
a:active {
background-color:#FFF;
color:#000;
text-decoration:overline;
}


#sub {
padding:30px 0px 0px 0px;
visibility:hidden;
position:absolute;
top:53px;
left:111px;
border:3px ridge #F00;
border-top:transparent;
width:64px;
height:75px;
}
#sub a:link, #sub a:visited {
width:64px;
height:18px;
background-color:#626262;
text-decoration:none;
font-size:12px;
padding:2px;
margin:0px;
color:#BDBDBD;
border:1px solid #000;
}
</style>
</head>

<body>



<div id="main">
<a href="#">Home</a>
<a href="#" onMouseOver="display('sub');">About</a>
<a href="#">Links</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
</div>
<div id="sub" onUnFocus="document.this.style.visibility='hidden';">
<a href="#">Me</a>
<a href="#">Site</a>
</div>

</body>
</html>


I got the meat of the script working, after trying in IE6, so now I'm in the middle of tweaking the visuals in Moz 1.4, so it's probably not going to look exactly correct in either. Sorry.

Also, it appears you have to rollover the link twice to get the submenu to appear...:confused:
fredmv
11-13-2003, 01:27 AM
It isn't working because onunfocus isn't a valid event handler, try using onblur.
Pittimann
11-13-2003, 02:16 AM
Hello Paul Jr!

Your problem will be solved if you use this code:

<div id="main">
<a href="#" onMouseOver="sub.style.visibility='hidden';">Home</a>
<a href="#" onMouseOver="sub.style.visibility='visible';">About</a>
<a href="#" onMouseOver="sub.style.visibility='hidden';">Links</a>
<a href="#" onMouseOver="sub.style.visibility='hidden';">Gallery</a>
<a href="#" onMouseOver="sub.style.visibility='hidden';">Contact</a>
</div>
<div id="sub" onClick="this.style.visibility='hidden';" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<a href="#">Me</a>
<a href="#">Site</a>
</div>

The onblur event would only have an effect, if the user clicked anywhere except on the submenu (Me or Site)...

With the code above it should work exactly like you intend it to.
Pittimann
11-13-2003, 02:21 AM
Sorry!

I forgot to mention that this code is not cross browser compatible. There are browsers which do not interprete "visibility=hidden" or "visible" correctly. At least from older Netscape versions I know that it would have to be "hide" or "show" instead...
Paul Jr
11-13-2003, 12:46 PM
Sweet, thanks a lot guys. I'll try that out.
Paul Jr
11-13-2003, 12:50 PM
Alright, it works perfect! I just added


onMouseOut="sub.style.visibility='hidden';"


To the "About" link, because if you moved your mouse up above the "About" link, the sub menu would not disappear. Thanks a lot for your help!
Paul Jr
11-13-2003, 03:05 PM
Originally posted by Pittimann
Sorry!

I forgot to mention that this code is not cross browser compatible. There are browsers which do not interprete "visibility=hidden" or "visible" correctly. At least from older Netscape versions I know that it would have to be "hide" or "show" instead...


Is there anyway to make this cross browser compatible? It appears this does not work in Mozilla 1.4 either.
AdamGundry
11-13-2003, 03:08 PM
Try using replacing "sub" with:

document.getElementById('sub')

Adam
Paul Jr
11-13-2003, 03:21 PM
Yes! It works! My project has come to life to destroy my static, uninteresting menus!!! Heh heh :). Yes, it works, thanks to everyone for all their help.
PunkSktBrdr01
11-13-2003, 09:37 PM
Hey, I have a similar question. I'm working on a new site, discussed in this thread (http://forums.webdeveloper.com/showthread.php?s=&threadid=21295), and I want to have the menu disappear when the user clicks elsewhere on the page. I'm trying to figure out how to make submenus also, so if anyone can help with that... Thanks! :)