Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:27
Form Selects Over DHTML Menu issue
Poster: Suinfall
Dated: Wednesday November 2 2005 - 14:38:35 GMT
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
Poster: Ruth
Dated: Wednesday November 2 2005 - 20:03:46 GMT
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:
<!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="http://www.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>
<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="http://www.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
Poster: Diakonos
Dated: Wednesday October 18 2006 - 17:04:17 BST
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!
Poster: Ruth
Dated: Wednesday October 18 2006 - 18:19:33 BST
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
Poster: Andy
Dated: Friday October 20 2006 - 15:14:13 BST
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
Poster: Diakonos
Dated: Friday October 20 2006 - 15:18:10 BST
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!
Poster: esr_alec
Dated: Wednesday November 1 2006 - 17:22:10 GMT
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:
<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>
<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?