Results 1 to 7 of 7

Thread: Smarty & Drop down/ Overlapping Content Script

  1. #1
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smarty & Drop down/ Overlapping Content Script

    Drop down/ Overlapping Content Script
    http://www.dynamicdrive.com/dynamici...lapcontent.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????

    Code:
    <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}

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

  3. #3
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is a link to it:
    http:///apps/CMS_Catalog/base/cateri...N01.html?print

    CLICK ON THE "NSF ICON" IN THE DESCRIPTION TABLE.
    Last edited by Bently; 11-21-2007 at 10:32 PM.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    "
    "
    <!--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>

  5. #5
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

  7. #7
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •