PDA

View Full Version : Problem with 'Drop down/ Overlapping Content script'



martib
06-29-2007, 07:13 PM
Hi! I want to use the Drop down/ Overlapping Content script (http://www.dynamicdrive.com/dynamicindex5/overlapcontent.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
06-30-2007, 12:43 AM
Seems to be working for me...

martib
06-30-2007, 02:10 AM
sorry, forgot to specify in IE (in FF it's working)

ddadmin
06-30-2007, 07:20 AM
In IE, the line:


wMessageWindow.focus();

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

martib
06-30-2007, 10:09 AM
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
07-03-2007, 08:47 PM
Hallo? Anyone?

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

ddadmin
07-04-2007, 07:45 AM
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
07-05-2007, 06:18 PM
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
07-06-2007, 06:57 AM
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
07-10-2007, 07:29 PM
nicely done!

thank you!