PDA

View Full Version : Smarty & Drop down/ Overlapping Content Script



Bently
11-19-2007, 07:52 PM
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
11-20-2007, 09:25 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Bently
11-20-2007, 08:52 PM
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
11-21-2007, 11:01 AM
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
11-21-2007, 03:06 PM
I've actually tried that and it did not work. I can posted the source code of the page if that helps.

ddadmin
11-21-2007, 09:56 PM
Sure, or if the source is very long, attach it as a txt file here.

Bently
11-21-2007, 10:32 PM
its fixed...it was actually the movement of the div. thank you