Hello, I have a menu with links. It is located in a fixed div. When mousepointer leaves div it should fade away. First I made my own routine for mouse out event. It would unfortunately also fire when I went into links IN the menu. I now therefore use another routine from Quirksmode. This routine works well in IE7 but not in FF. I think the routine is good for X-browser, I think I make some simple error. (Another thing I don't understand is why position fixed does not work in IE7) I made a short example for this thread here: http://yorabbit.info/e-dog.info/t/63/doc/mouseout_quirk.htm Really grateful for advice. Thanks ycc EDIT: The problem with IE7 and position fixed is solved. IE7 needs document declaration tag at start of document to accept position fixed. However, the main problem, regarding event handling remains unsolved. It also seems the doctype-tag made event handling stop functioning also in IE7
Thanks Imozeb, I missed that. I have now both BODY and DIV in capitals, like in the event handler. But it still does not work in neither IE7 or FF Please advice further. Thanks /ycc
I tried to read a little about this. It seems not to be a trivial task to have a menu that hides at mouse out. The site quirksmode is excellent, but this time I couldn't make the advice work. The basic problem is that if you hover links INSIDE the div, that action will be interpreted as LEAVING the div!!! The only thing I could make work in an afternoon was a simple JS solution. I also want fade in and fade out. My very simple menu with ugly code is found here. (Hover over "MENY" at top right to open menu.) I even had to fill blanks after the shorter links, otherwise my IE7 would interpret that area as mouseout!! If anyone can give advice of a better solution please write. Especially if it includes a X-browser eventhandler for the mouseout event of a div-tag containing links.
hi- if you wrap that fixed div inside another div, it seems to work just fine - although i don't have time to test it in IE. here is a link:http://www.demetri-media.com/JavaScript/Untitled-1.html and here is the code. pay attention to the changes in the css, the body, and of course the javascript. from this i hope you can see the possibilities to realize your full intent. for now, it is a fixed div, initially visible, that on mouse out goes invisible, and on mouse over appears again. i gave the div a yellow background just for extra emphasis in the example : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #trsp_menu2 { position: fixed; width: 200px; font-size: 14px; top: 162px; left: 100px; padding: 0px 2px 0px 2px; z-index: 30; visibility:visible; } #trsp_menu {background-color:#FF6;border: solid 1px #404040; } </style> <script type="text/javascript"> function showsup(){ document.getElementById('trsp_menu').style.visibility="visible"; //document.getElementById('trsp_menu2').style.display="inline"; //alert("shows up"); } function goesaway(){ document.getElementById('trsp_menu').style.visibility="hidden"; //document.getElementById('trsp_menu2').style.display="inline"; //alert("goesaway"); } </script> </head><body> <div id="trsp_menu2"onmouseover="showsup()" onmouseout="goesaway()" > <div id="trsp_menu" > <a href="#">[top]</a><br> <a href="#Skript_lang">skriptsprk</a><br> <a href="#Regexp">reg. exp.</a><br> <a href="#byt_namn">filer, namnbyte</a><br> <a href="#Pipes">pipes</a><br> <a href="#skript">skript</a><br> <a href="#mer_om_namnbyte">mer_om_namnbyte</a><br> <a href="#Citationstecken">citationstecken</a><br> <a href="#Sed">sed</a> <br> <a href="#Kontakt">kontakt</a> <br> abc (under arbete)<br> abc (under arbete) </div> </div> </body> Code (markup): hope that i understood what you were trying to accomplish....
Thanks tdemetri, You solved it. I didn't see any solution of this kind when I surfed around yesterday. (But several people found the problem annoying.) In my IE7 the yellow div will not come back on mouseover after it has gone away on the first mouseout. But that is not related to the issue here. I think it is what you would expect when you make it "hidden" it in IE. When it comes to the main problem (firing of the mouseOUT event when going into links WITHIN the div) it seems to me you have found a very practical solution. (Also good in Linux FF and Chromium) Thanks.
thanks - glad to help. i want to clarify, in case any one else needs this information: it was wrapped in a separate div so that now the the new wrapper div can have the mouseover/mouseout event/functions attached to it, and the inner div is what is now targeted by those functions.