Overlapping Content link

[yourbudweiser]

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

Very useful script. I was wondering how to do two things:

1) When a link is clicked, close any other content that may be open
2) Make sure it fits within the viewable screen area

Thanks for any help.

[Twey]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

[yourbudweiser]

man you are fast Twey

[jscheuer1]

For number one, change this:

function overlay(curobj, subobj){
if (document.getElementById){
var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj, "left")+"px"
subobj.style.top=getposOffset(curobj, "top")+"px"
subobj.style.display="block"
return false
}
else
return true
}

to this:

function overlay(curobj, subobj){
if (document.getElementById){
var overlays=document.getElementsByTagName('div')
for (var i_tem = 0; i_tem < overlays.length; i_tem++)
if (overlays[i_tem].id.indexOf('subcontent')!==-1)
overlays[i_tem].style.display="none"
var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj, "left")+"px"
subobj.style.top=getposOffset(curobj, "top")+"px"
subobj.style.display="block"
return false
}
else
return true
}

For number two, there are various methods to do something like this but, all that I have seen suffer from the possibility that the window will be limited in two or three dimensions rather than the expected one. This gives rise to all sorts of weird effects. A better approach would be to keep the size of the overlays reasonable and to keep their trigger elements high enough on the page that a reasonable window size will accommodate their full visibility. If you are trying to make this script into a menu or tooltip, don't. Use a menu or tooltip script for that.

[yourbudweiser]

thanks so much for replying, bur for some reason, the previous overlay isn't closing when a new one is clicked...

[jscheuer1]

Is its id subcontentX where x is a number or simply subcontent? The id's must be as laid out as in the demo for this modification to work. I tried this out here, and it worked fine. So, if the id is not the trouble, post a link to your page and I'll see what's stopping it from working.

[yourbudweiser]

John, thanks for the response. With the help of a friend, I modified the script as below and it works great. Thanks for the help.

-----------------------------

Add class="OverlayDiv" to all divs that are overlay...

<DIV id="subcontent" style="position:absolute; display:none" class="OverlayDiv">
...
...
<DIV id="subcontent2" style="position:absolute; display:none" class="OverlayDiv">
...
...

and change

function overlay(curobj, subobj)

to

function overlay(curobj, subobj){
if (document.getElementById){
closealloverlay();
var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj, "left")+"px"
subobj.style.top=getposOffset(curobj, "top")+"px"
subobj.style.display="block"
return false
}
else
return true
}

and add

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);
}
}
}