Form Selects Over DHTML Menu issue

Suinfall · Post by **Suinfall** » Wed Nov 02, 2005 3:38 pm

Can anyone give me a simple code to reveal the trick how to get around the issue that Form Selects over the DHTM Menu. I have not used the ‘Milonic' products yet but just want to know how it works. By downloading the sample code from ‘Milonic’, I still can’t quite understand the JS code. Thank you for help!

Suin

Post by **Ruth** » Wed Nov 02, 2005 9:03 pm

The menu should just drop over the form selects without having to do anything. Try the following body using the newest version 5.734. .

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Test Menu Drop Over Form Select</title>
</head>

<body>
<script type="text/javascript" src="milonic_src.js"></script>	
<a class=milonic href="https://milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
<script	type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="menu_data.js"></script>	
<br><br><br><br><br><br>
<form>
<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>

<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>

<select>
<option>Testing to see
<option>if the menu will
<option>sit on top of
<option>select boxes
</select>
</form>

</body>
</html>

This works in Opera 7.54+, Netscape 6+, IE5+, FireFox 1.0.2+ . It even works in the old Firebird. If you want it to work in Netscape 4.79/8 you'll need to use the divhider.js module, place the form in a div and call the divhider with the menu. You can see this at Sample14

Ruth

Diakonos · Post by **Diakonos** » Wed Oct 18, 2006 5:04 pm

What is the specific CSS/JS/code that automatically prevents the menu from showing the SELECTs underneath? I have a different project that uses a floating DIV/IFRAME combination and notice that your menu does not seem to have a problem with covering SELECTs when displayed.

Any help or suggestions you have would be appreciated. Thanks!

Post by **Ruth** » Wed Oct 18, 2006 6:19 pm

Hi,

Are you asking why it drops over the divs and shows the select over the divs instead of going behind?

I have no idea, you'd have to contact Milonic about why it does it. I just know it does.

Ruth

Diakonos · Post by **Diakonos** » Wed Oct 18, 2006 7:11 pm

LOL. Must be the "secret sauce."

Post by **Andy** » Fri Oct 20, 2006 3:14 pm

It's IFRAME masking - something that Milonic developed alongside Microsoft and Honeywell a few years ago. This technique (like many other tricks and techniques) appears in most competing menu products now.

The trick, as it's not such a secret anymore due to it being copied, is to add an IFRAME in the background that has its zIndex lower than the menu and has its properties set to see-through. As the IFRAME sits on top of the select box it covers it, the menu also has a higher zIndex than the IFRAME and "hey presto" it's there in all its glory.

Hope this helps,
Andy

Diakonos · Post by **Diakonos** » Fri Oct 20, 2006 3:18 pm

Thanks, Andy! Got the "secret sauce" answer from the man himself!

I found a very good explanation on MSDN's site of "windowed" and "windowless" elements and how they operate/relate in IE and IFRAME/SELECTS. This is great though. I'm looking forward to getting it working in my project. Thanks, again!

esr_alec · Post by **esr_alec** » Wed Nov 01, 2006 6:22 pm

I've encountered this problem lately as well. I already use the milonic menu in my site, however I have a little non-menu related popup window that isn't covering form selects. Is there an easy way to hook into the milonic script to solve this?

Meanwhile, here is a sample what I tried to do after reading up on the iframe masking:

Code: Select all

<div id="call_popup" class="popup" style="visibility: hidden; display: none; z-index: +10">
    <iframe src="" frameborder="0" style="filter:alpha(opacity=0);z-index:-1;position:absolute;width:300px;height:150px;top:0;left:0"></iframe>
    <div id="call_drag" class="notes_header">
         <img id="call_exit" class="notes_exit" src="images/icons/close.gif" alt="Close" />
         Call Attempt
     </div>
     <div id="call_text">
        ...more stuff
     </div>
</div>

I'm using another script library that shows this div element underneath a link on the main page. The user can drag the layer around on the screen. Without the iframe it works swell, but of course on IE6 any form selects show through it. By adding the iframe I can hide the selects underneath, but anything the iframe covers doesn't work, e.g., the close icon isn't clickable nor are any of the buttons I have. So apparently the iframe is opaque, but still on top of my div?

EDIT: Sorry, should have experiemented a bit more before posting. The above configuration actually does mostly work, however once you start to drag the div around the window certain elements on the main window behind start to disappear. So I guess my question is simply is there a better way than what I've done above so it works cleanly in IE6?