Problem with 'Drop down/ Overlapping Content script'

[martib]

Hi! I want to use the Drop down/ Overlapping Content script (http://www.dynamicdrive.com/dynamici...lapcontent.htm)
to open a small window for a preview-like window.

As I have to limit the size of the parent div container with a overflow:auto
the popup is hidden.

How to bring the window to the front in IE (FF is working)?

This is the example page:
http://www.youpi.de/overlap.htm

(The windows div tag can not be put outside of the overflow div container as the links are generated by my software)

[alexjewell]

Seems to be working for me...

[martib]

sorry, forgot to specify in IE (in FF it's working)

[ddadmin]

In IE, the line:

wMessageWindow.focus();

seems to be the problem here. Try removing it. IE is returning a "Can't focus" error.

[martib]

no, i removed all the lines but it did not help.

i think the problem comes from the 'style="overflow:auto"'.
is there a way to bring the overlapping in front (z-index did not work, or i used it wrong)

[martib]

Hallo? Anyone?

I am sure it is an easy piece of code. But which?

[ddadmin]

My mistake- the problem in IE is due to the fact that the drop down DIVs are contained inside the scrolling DIV. This creates a container relationship in IE that makes the child DIVs appear beneath the main. Move all of your drop down DIVs outside your <TABLE> tag so they're no longer children of the scrolling DIV, such as directly above the </BODY> tag. For example:

<DIV id=subcontent1169670486 
        style="BORDER-RIGHT: blue 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: blue 1px solid; DISPLAY: none; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: blue 1px solid; WIDTH: 300px; PADDING-TOP: 4px; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; BACKGROUND-COLOR: white; z-index: 100"><IFRAME 
        border=0 src="test_files/yahoo.htm" width=290 height=200></IFRAME>
        <DIV align=right><A 
        onclick="overlayclose('subcontent1169670486'); return false" 
        href="http://www.youpi.de/overlap.htm#">Close</A></DIV></DIV>

</body>

[martib]

thanks for having another look into that problem.

yes, i know that would work, but as i mentioned the windows div (drop down DIV) tag can not be put outside of the overflow div container as the links are generated by my software. :-/

is there a way to break the parent / child relation in IE?

[ddadmin]

Ah right, I neglected to consider that part of your problem. One solution I can think of is to manually define a DIV that's outside your scrolling DIV at the bottom of your page's source, for example:

<div id="actualcontent" style="position:absolute; border: 1px solid blue; background-color: white; width: 300px; padding: 4px; display:none; z-index:100;">

</body>

Then, modify the script to grab the HTML contained inside the original DIVs, and display it inside the DIV we just added instead. To do this, change the original script to the following version instead:

<script type="text/javascript">

/***********************************************
* Drop Down/ Overlapping Content- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobjcontent=document.getElementById(subobjstr).innerHTML
var subobj=document.getElementById("actualcontent")
subobj.innerHTML=subobjcontent
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

function overlayclose(subobj){
document.getElementById("actualcontent").style.display="none"
}

</script>

I did a quick test in IE and Firefox, and it seems to work.

[martib]

nicely done!

thank you!