Drop Down Tabs positioning problem

[mason]

1) Script Title: Drop Down Tabs

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

3) Describe problem:

I've gotten this working fine on a test page, and have integrated it with our site and it's mostly working. The issue I'm working with right now is that the drop-downs are not getting positioned properly. The getposOffset() function isn't returning the proper offset of the tab, so the drop-downs are getting their x position set to the right of the proper place -- and the position moves if I resize the browser window. The function is doing the right thing, I think (I even tried replacing it with a similar function from quirksmode.org, which returned the same info). So apparently something in the DOM is confusing things, but I'm not sure what would do that. Any thoughts would be very much appreciated!

[ddadmin]

Most of the positioning problems with the drop down menus 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, ie:

<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>

</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</body>

[mason]

Thank you for the reply. I have a feeling that would work, but unfortunately it's not an option because of the way our pages are dynamically generated right now. The navbar is generated by code that inserts it into the middle of the page, so I can't move the dropdowns to the bottom of the page.

I see that the Javascript code tries to identify the position of the tabs themselves in order to position the dropdowns, and that seems to be where the issue is -- it's just not determining the proper position (I've added debugging alerts and used Firebug to see what's happening). If someone has an idea of why the offsets aren't being calculated correctly, please let me know!

Thanks very much.

[ddadmin]

I see that the Javascript code tries to identify the position of the tabs themselves in order to position the dropdowns, and that seems to be where the issue is.

Actually no. If my suspicions are correct, the issue is due to the fact that the HTML for your drop down menus are added inside positioned elements on the page (ie: absolute or relative). When that happens, the drop down menus' positions can become incorrect.

One thing you can try is finding the below line inside the .js file, and adding to it the line in red:

document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
document.body.appendChild(document.getElementById(relvalue))

Then for the initalization code on your page that follows the menu's HTML, for example:

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>

The above needs to be called after the document has loaded, so something like:

<script type="text/javascript">
window.onload=function(){
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
}
</script>

Or if you have access to the "footer" area of your page, call the original initialization code at the very end of the page, which is better than calling it via window.onload.

[mason]

Thank you again for your thoughts and your help. I think you're right that the problem is that drop down menus are inside positioned elements in the page -- that's actually what I meant when I said that Javascript is having a problem there. I think the Javascript is just right, but our page is causing it to not do what it should.

I tried your suggestion, but it made the drop down menus not appear at all... I will continue to play with it and also see if there's any way I change the page template (which will unfortunately be very difficult just because of the structure of our pages right now).

Thanks very much for your help and for the always great scripts.