Dropdown content position

[carsal]

1) Script Title: Dropdown overlapping content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

3) Describe problem: Hi, I am using the script and it is working well except the overlapped content box is being positioned way to the right side. Apparently the script isn't calculating correctly the position of the anchor and the margins on the overlapped content are being set with this wrong values. How can I use the vertical and horizontal offset parameters to correct the position?

[ddadmin]

You shouldn't have to use the vertical/horizontal offset settings to correct the problem. Most of the positioning problems with the drop down DIV can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag, for example:

<DIV id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; width: 350px; height: 120px; padding: 4px;">

<div style="width: 49%; float: left">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</li>
<li><a href="http://www.cssdrive.com">CSS Drive</li>
<li><a href="http://www.codingforums.com">Coding Forums</li>
</ul>
</div>
</body>

If you need more help please post a link to the page on your site that contains the problematic script so we can check it out.

[carsal]

Thanks for the prompt reply. Unfortunately this is not possible as this is part of a php generated page, so the only option I have is correct the problem with offsets, however I can't seem to find a way to include the offsets without modifying the script as I use it for several div's. Is there a way to pass the offset either in the div or on the script function call.

Thanks.

[ddadmin]

You'll want to find a dynamic way to reposition the drop down DIV based on the additional offsets of the DIV it's contained in. For example, lets say your drop down DIV is inside the DIV in red below:

<div id="test" style="position:relative; left:100px; top:50px">

<p>Demo #1: <a href="http://www.dynamicdrive.com" id="searchlink" rel="subcontent">Search DD</a></p>


<DIV id="subcontent" style="position:absolute; visibility: hidden; 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 name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
<input value="Search" class="topformbutton" type="submit" />
</form>

<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent')">Hide this DIV manually</a> | <a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>


</DIV>

</div>

If you try the above out, you'll notice how the DIV is positioned incorrectly as a result, namely, 100px to the right and 50px down where it should be. Normally the solution is just to move the drop down DIV outside the DIV in red, but since you can't do that, you'll need to tell the script to take into account the additional offset. Inside the .js file for example:

subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + 100 + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+50+verticaloffset+"px"

That's the general idea anyway.