PDA

View Full Version : Overlapping Content link



yourbudweiser
09-20-2005, 03:44 PM
Script: Overlapping Content link
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.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
09-20-2005, 03:45 PM
Beware the Flying Spaghetti Monster.

yourbudweiser
09-20-2005, 03:46 PM
man you are fast Twey :)

jscheuer1
09-20-2005, 05:08 PM
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
09-20-2005, 09:26 PM
thanks so much for replying, bur for some reason, the previous overlay isn't closing when a new one is clicked...

jscheuer1
09-20-2005, 10:02 PM
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
09-21-2005, 03:55 PM
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);
}
}
}