Overlapping Content Link and HTML <select>

[erizzo]

Script: Overlapping Content Link
http://www.dynamicdrive.com/dynamici...lapcontent.htm

I'm trying to integrate this useful script into a large web form, but I've noticed some odd behavior in how it interacts with <select> elements on the underlying page. The <DIV> will popup on top of all elements on the "base" page except for <select> elements - they appear on top of everything in the popup <div>.

You can see the problem demonstrated here (which is the sample code of the script modified only to add a <select> element on the page):

It works just fine in Firefox, but IE 5.5+ insists on putting the <select> on top even if I specify z-index: 1000; in the style of the popup <div>

Can anyone shed any light on why it's doing this?

TIA,
Eric

[jscheuer1]

This is a known bug/feature of IE. What generally is done is (in IE only) to hide the select while whatever it is that you want to cover it is visible. To that end, I have modified your example in such a way that it should be able to be used as a template for all situations like this in your final markup. For hiding more than one select per overlapping content, see note* an the end of this post. I added this function at the top of the script:

function hideShowSelect(){
if (document.getElementById&&document.documentElement.filters){
var args=arguments;
for (var i_tem = 0; i_tem < args.length; i_tem++)
if (document.getElementById(args[i_tem]).style.visibility=='')
document.getElementById(args[i_tem]).style.visibility='hidden';
else
document.getElementById(args[i_tem]).style.visibility='';
}
}

I modified both the 'close' link (addition red):

<a href="javascript:hideShowSelect('someList');overlayclose('subContent');">Close</a>

and the 'Show Search Popup' link:

<a href="#" onClick="hideShowSelect('someList');return overlay(this, 'subContent');">Show Search Popup</a>

That's it.

*Note: If you need to hide more than one select (or any other element(s) for which you have an id assigned) just add the other id(s) into both calls to the 'hideShowSelect' function, ex:

hideShowSelect('someList', 'anotherList', 'yetAnotherList')

[erizzo]

Thanks. I was afraid the answer would be "known issue with IE" and I am disappointed to be correct...
Your work-around seems OK, but the limitation is that I have to be able to predict which <select> elements need to be hidden before showing the <div> - that is tough because the content of the <div> is somewhat dynamic and depends on the browser's chosen font size, etc. It is probably workable, but I will treat it as a last resort option.
I have another idea or two that I will also try, such as putting an iframe in my <div> to see if it correctly overlays the <select> elements.

Thanks again,
Eric

[erizzo]

First of all, I found this article that explains the problem in detail, for those web archaelogists who might be interested:
http://www.webreference.com/dhtml/diner/seethru/

Secondly, I took jscheuer's code posted earlier in this thread and ran with it, you might say. I did not like the idea of having to predict what <select> elements would need to be dynamically hidden prior to showing the "popup." At first I tried hiding all <selects> on the page, which worked with minor modifications to the code but had the unintended side effect of hiding any <select> elements that might be on the popup <div> - doh!

I'm a tenacious, persistent brat, so I was not ready to give up. I scoured the web for script to determine the absolute top and left coordinates of any element (found it here ). I then investigated the offsetWidth and offsetHeight properties. With a little plundering from the Java core libraries (specifically, the Rectangle class) I was able to write an areOverlapping() function that determines if any two elements overlap on the page. With that function, I could modify jscheuer's function so that it will hide only those <select> elements that overlap the popup <div> and are not contained within it. Voila!

My next question is, how does one go about posting an enhanced version of one of the Dynamic Drive scripts - I'd like to share my complete code for others to leverage, if possible.

Eric

[jscheuer1]

Well, if it is not too long, you can post it right here, just put code tags* around it. If it is too long for that, you could attach it (scroll below the full message editor for options as to how to do that). If it is really big, make a zip archive of it first. You could also, or instead, provide a demo somewhere online where the source code could easily be viewed using the 'view source' of any browser.

*put code tags:

[code]

code goes here

[/code]

around your code