Smarty & Drop down/ Overlapping Content Script

[Bently]

Drop down/ Overlapping Content Script
http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

The Issue:
I have the script in a Smarty template. The code works, but the positioning is off. The popup should be directly underneath the image/text I am using as the link. But it pops up in the middle of the page instead of right underneath it.

Can anyone help????



<script type="text/javascript">
{literal}

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

{/literal}
</script>


_________

{if $item->getFlags()}
{foreach from=$item->getFlags() item=_flag}
{if $_flag->getImage()}
{assign var=_image value=$_flag->getImage()}
{if $_flag->hasParagraph()}
<a href="#" onclick="return overlay(this, '{$_flag->getName()|escape}_data', 'rightbottom');"><img src="{$_image->getUrl(#flag_image_format#)}" /></a>

<div id="{$_flag->getName()|escape}_data" style="position: absolute; display:none; border: 2px solid black; background-color: white; width: 300px; padding: 3px;"> {$_flag->getParagraph()}
<div align="right"><a href="#" onclick="return overlayclose('{$_flag->getName()|escape}_data');"><b>Close X</b></a></div>
</div>
{else}
<img src="{$_image->getUrl(#flag_image_format#)}" />
{/if}
{/if}
{/foreach}
{/if}

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Bently]

Here is a link to it:
http:///apps/CMS_Catalog/base/catering/cateraideins~3/PC600N01.html?print

CLICK ON THE "NSF ICON" IN THE DESCRIPTION TABLE.

[ddadmin]

Your link currently doesn't load for me. In general though, positioning problems with this script can be solved by moving the drop down DIVs themselves to the very bottom of the page, outside any container DIVs on the page other than the BODY tag. So for example:


"
"
<!--Do not remove outer most DIV tag with id="subcontent"-->
<DIV id="subcontent" style="position:absolute; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; display:none">

<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>
</body>

[Bently]

I've actually tried that and it did not work. I can posted the source code of the page if that helps.

[ddadmin]

Sure, or if the source is very long, attach it as a txt file here.

[Bently]

its fixed...it was actually the movement of the div. thank you