Overlapping Content

[Tombc]

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

Hi, I'd like to say thay I loved this script, it's very useful.

I don't know if it's the right place to ask...

I'd like to make a little change in this script.It's gonna be a little hard to me to explain what exactly I want to do, because my English is horrible... (I'm Brazilian )

When I click in a link, the layer shows up... when I wanna close it, I must to click on the "close box", it's the only way to close. I'd like to be able to close it clicking outside of the layer. I don't want to remove the "close box", I just want another option to close the box. It's like this script
http://www.dyn-web.com/dhtml/write-drag/img-txt.html

I really need this, because I use Ajax Tabs Content script (http://www.dynamicdrive.com/dynamici...ent/index.htm). I click in a link that use the Overlapping Content, when I change the page using Ajax Tabs Content script, the layer don't disappear... it stays in the same place and overlaps the other page...

Thanks

[ddadmin]

Sure, simply replace the original script in the HEAD section of your page with this modified one:

<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 subobj=document.getElementById(subobjstr)
document.onclick=function(e){
clicktohide(curobj, subobjstr, e)
}
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(subobj).style.display="none"
}

function clicktohide(linkobj, subobj, e){
var currentnode=(window.event)? event.srcElement : e.target
var hidesubobj=true
while (currentnode.tagName!="BODY" && currentnode.tagName!="HTML"){
if (currentnode.id==subobj || currentnode==linkobj){
hidesubobj=false
break
}
currentnode=currentnode.parentNode
}
if (hidesubobj)
overlayclose(subobj)
}

</script>

It causes the subcontent to disappear if the user clicks outside the subcontent.

[jscheuer1]

I was struggling with this one and couldn't quite get it to work out but, I'd wanted it to close the previous overlapping content, if any, as well - like the demo page from dyn-web.com. Using DD's code above as a jumping off point, I was able to do that. Here is my modification to that modification:

<script type="text/javascript">

/***********************************************
* Drop Down/ Overlapping Content- © 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, e){
if(typeof document.onclick=='function')
document.onclick(e);
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
document.onclick=function(e){
clicktohide(curobj, subobjstr, e)
}
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(subobj).style.display="none"
}

function clicktohide(linkobj, subobj, e){
if(!e && (!window.event||!window.event.srcElement))
return;
var currentnode=(window.event)? event.srcElement : e.target
var hidesubobj=true
while (currentnode.tagName!="BODY" && currentnode.tagName!="HTML"){
if (currentnode.id==subobj || currentnode==linkobj){
hidesubobj=false
break
}
currentnode=currentnode.parentNode
}
if (hidesubobj)
overlayclose(subobj)
}

</script>

However, this requires a slightly different syntax when calling the overlapping content. The optional position must now either be declared or be an empty value and either way, be followed by the unquoted word event (to pass the event to the script). To demonstrate, here are how the two example calls from Step 2 of the demo page here on dynamic drive would now look using this syntax (additions red):

<a href="search.htm" onClick="return overlay(this, 'subcontent', '', event)">Search DD</a>

and:

<a href="search.htm" onClick="return overlay(this, 'subcontent2', 'rightbottom', event)">Show Content</a>

[ddadmin]

Hi John:
I didn't check out the dyn-web demo, though I knew my modification wouldn't close any additional contents that may be open. Nice addition to mine to change that, though what if the user wants multiple contents to still be allowed to be open at the same time, just that when it comes to closing them, all should be closed onclick?

[jscheuer1]

I had thought about that and was thinking, "I need to create an Array." I'll play around with it a bit.

[Tombc]

Ddadmin, thank you so much!!

I did a modification, I'll put here if someone want this script. This script, when a link is clicked, any other content that may be open is closed and if the user clicks outside the subcontent, the subcontent disappears.
I used a modification given by ddadmin in this topic and yourbudweiser in this post.

Here you are:

Step 1: Insert the following script into the <head> section of your page:

<script type="text/javascript">

/***********************************************
* Drop Down/ Overlapping Content- © 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){
closealloverlay();
var subobj=document.getElementById(subobjstr)
document.onclick=function(e){
clicktohide(curobj, subobjstr, e)
}
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 closealloverlay()
{
var oDivs = document.getElementsByTagName("DIV");
var i;

for (i = 0 ; i < oDivs.length ; i++)
{
if (oDivs[i].className == "OverlayDiv")
{
overlayclose(oDivs[i].id);
}
}
}

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

function clicktohide(linkobj, subobj, e){
var currentnode=(window.event)? event.srcElement : e.target
var hidesubobj=true
while (currentnode.tagName!="BODY" && currentnode.tagName!="HTML"){
if (currentnode.id==subobj || currentnode==linkobj){
hidesubobj=false
break
}
currentnode=currentnode.parentNode
}
if (hidesubobj)
overlayclose(subobj)
}

</script>

Step 2: Insert the below HTML code into the <body> section of your page:

<a href="search.htm" onClick="return overlay(this, 'subcontent', 'right')">Show Content</a><br />

<DIV id="subcontent" style="position:absolute; display:none; border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px" class="OverlayDiv">
Some content. Some content.

<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close Box</a></div>

The difference in the body section is the class="OverlayDiv" put between the <div...>

Well, I use that script and it's working fine to me... I don't know if there's something wrong...

Thanks again Ddadmin!

[Tombc]

I have one problem... before changing the script, I could close the layer clicking at the same link... but it doesn't work anymore... I guess it's because of this change that I copied (http://www.dynamicdrive.com/forums/s...pping+content)... When a layer is open and I click in another link, the previous layer is closed... so probably the script "doesn't know" when I click at the same link, it thinks it's another link, so nothing happens when I click again... is there a solution?

Thanks

[jscheuer1]

Did you even try the code put forth here:

http://www.dynamicdrive.com/forums/s...77&postcount=3

? As i recall, I solved that problem.