Overlapping Content Link

**martino** · 12-01-2005, 09:32 PM

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

Hello, great script...just wanted to know how I can change the location of where the popup appears on the page. Perhaps in the center of the screen? Is this possible? If not, can I set an absolute px location instead?

Thanks,
Martin

**logicalinsanity** · 02-03-2006, 10:11 PM

I've been trying to figure this out as well. Specifically, I'd like to have the popup calculate the user's screen width/height and then center itself accordingly.

Here is the offset function code from the script on dynamic drive:

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, 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
}

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

I was trying to figure this out on my own by researching javascript offsets...and from what I understand, the offset is being calculated from where the offsetParent is....which is where the function is being called from (in this case, the link that opens the popup)? Though I read that offsetParent isn't supported in some browsers...or that they define it differently.

The more I try to figure it out...the more of a headache I get.

It would be awesome of someone could send an example of how I could go about making this centered....

Thanks!

**ddadmin** · 02-05-2006, 05:10 AM

Well, the whole point of the script was for the content to overlap the link that initiated it, so any position changes you made were relative to the link. Anyhow, below is the modified version of the original Content Overlay script that centers the content on the page instead:

Code:

<script type="text/javascript">

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

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function centerLay(box, type){
var firefox=document.getElementById&&!document.all
var posX=firefox? pageXOffset+window.innerWidth/2-box.offsetWidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-box.offsetWidth/2
var posY=firefox? pageYOffset+window.innerHeight/2-box.offsetHeight/2 : ietruebody().scrollTop+ietruebody().clientHeight/2-box.offsetHeight/2
if (type=="left")
return posX
else
return posY
}

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

function overlayclose(subobj){
document.getElementById(subobj).style.visibility="hidden"
}

</script>

<body>

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

<!--Sub content to overlay link when clicked on. Do not remove outermost <div id="subcontent"> tag below. -->
<DIV id="subcontent" style="position:absolute; visibility: hidden; top: 0">

<div style="border: 9px solid orange; background-color: white; width: 300px; padding: 8px">
<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input type="HIDDEN" NAME="id" SIZE="-1" VALUE="6299074" />
<input type="HIDDEN" NAME="pageid" SIZE="-1" VALUE="r" />
<input type="HIDDEN" NAME="mode" SIZE="-1" VALUE="ALL" />
<input type="HIDDEN" name="n" value="0">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
<input value="Search" class="topformbutton" type="submit" />
</form>
<div align="right"><a href="#" onClick="overlayclose('subcontent'); return false">Close</a></div>
</div>

</DIV>

<p><b><a href="search.htm" onClick="return overlay(this, 'subcontent2')">Another example</a></b><br /></p>

<!--Sub content to overlay link when clicked on. Do not remove outermost <div id="subcontent2"> tag below. -->
<DIV id="subcontent2" style="position:absolute; visibility: hidden; top: 0">

<div style="border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">
Some content. Some content.
<div align="right"><a href="#" onClick="overlayclose('subcontent2'); return false">Close</a></div>
</div>

</DIV>

The installation instructions for this script is exactly the same as the original script as far as what goes in the HEAD, in the BODY, and how to designate the overlay content.

**gniknalu** · 02-22-2006, 10:43 PM

Thats Fantastic! Thanks for the info. Maybe some of this can be added/linked to the page listing this script?

Thread: Overlapping Content Link

Thread Tools

Search Thread

Overlapping Content Link

Me too...

Bookmarks

Bookmarks

Posting Permissions