Merging AjaxTabs with AnyLink Drop down

[Irishjugg]

1) Script Title: AnyLink Drop Down Menu and Ajax Tabs

2) Script URL (on DD):
(http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm)
and
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:
I am trying to get ajax tabs to work together with the "AnyLink Drop Down Menu" script. So far, the closest thing to being sucessful I had was to actually put all of the ajaxtabs.js file code into the menus.js file from AnyLink (ugly solution, but I dont know how to do the equivalent of an include in javascript) and then alter the menus.js code here:


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
//return true;
}

to :


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

// Hack in ajax tabs?
var admin=new ddajaxtabs("dropmenudiv", "inner")
admin.setpersist(false)
admin.setselectedClassTarget("link") //"link" or "linkparent"
admin.init()
//

return clickreturnvalue()
//return true;
}

which made the script work, however whenever I even hovered over the parent link that spawns the drop down menu, the ajax fetch would happen and whatever page had been loaded into the container div would disappear. I tried moving the admin.init() to several different places but could not find a configuration that did not either destroy my original functionality, or that allowed the new functionality I wanted.

Is there a solution for merging the two scripts that exists already?

I have a demo page set up, at this location:
Demo Page (http://web.science.nd.edu/bestbuddies/playground/welcome.php)
The anylink drop down is the admin button on the right, all the links point to the same dummy page. The goal is to get them to load into the same contennt div (called "inner") as the other buttons on the top bar menu, they use ajax tabs.

some code for the admin button creation:

<a href="admin.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">
<li class="topbars">Admin</li>
</a>

and for the other links that use ajax tabs:

<li class="topbars"><a href="#" rel="#default" class="selected">Home</a></li>
<li class="topbars"><a href="mybuddy.php" rel="inner">About</a></li>
<li class="topbars"><a href="external.php" rel="inner">Event Schedule</a></li>
<li class="topbars"><a href="external.php" rel="inner">Officers</a></li>

and finally ajax tabs instantiation:

var tabs=new ddajaxtabs("tabbar", "inner")
tabs.setpersist(false)
tabs.setselectedClassTarget("link") //"link" or "linkparent"
tabs.init()

If anyone has any suggestions, I have tried several different things and as I said above, to varying success.

Thanks to ddadmin for requesting I start this as a new thread and for your previous help.

[ddadmin]

Firstly, it's a lot easier to use Anylink CSS Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm) instead for this due to the menu content being regular HTML markup on the page. Having installed both scripts on your page, here's a working example of the two coming together to do what you want:


<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="anylink.css" />

<script type="text/javascript" src="anylink.js"></script>

</head>

<body>

<h3>Demo #1- Basic implementation</h3>

<!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Drop Down Tab</a>


<div id="countrytabs" >

<ul class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>

<div id="anylinkmenu1" class="anylinkcss">
<a href="external2.htm" rel="countrycontainer">Tab 2</a>
<a href="external3.htm" rel="countrycontainer">Tab 3</a>
<a href="external4.htm" rel="#iframe">Tab 4</a>
</div>

</ul>

</div>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

The code in red corresponds to that for Anylink Menu, to distinguish between the two. The most important point here is to put the HTML for the drop down DIVs themselves (code in bold) so it's contained within the Ajax Tabs menu area (with id="countrytabs"). That way, the links inside the menu gets parsed by Ajax Tabs script for any special meaning (ie: rel="countrycontainer"). Notice how I've added an extra DIV surrounding both the Ajax Tabs and Drop Down Menus, and moved id="countrytabs" to this DIV instead of the default UL instead:


<div id="countrytabs" >
"
"
</div>

That way, the drop down DIVs are contained in a DIV instead of the UL element, which may lead to formatting problems.

[Irishjugg]

Hey ddadmin, I have been trying to implement this, and followed the directions for the AnyLink css menu properly, and did very little to the css file, except change the bordering properties of the drop down menu, but my menu does not pop up at all. I was looking thru the anylink.js file and there are constant references to a "dropmenuobj" object that I never see instantiated. Could be a misunderstanding of javascript, but Im a bit confused by that.

Anyway, heres my code, I cant figure out what is wrong here:

<div id="adminwrap">
<ul id="admin">
<li class="lcap topbars"></li>

<a href="admin.php" rel="inner" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, 'admindrop')">
<!--<a href="admin.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">-->
<li class="topbars">Admin</li>
</a>

<li class="rcap topbars"></li>
</ul>

<div id="admindrop" class="anylinkcss">
<a href="admin/announce.php" rel="inner">Announcements</a>
<a href="admin/events.php" rel="inner">Manage Events</a>
<a href="admin/members.php" rel="inner">Manage Members</a>
<a href="external.php" rel="inner">Special Reports</a>
<a href="admin/help.php" rel="inner">Help</a>
</div>
</div>

and later for the ajax tabs:

<script type="text/javascript">
var admin=new ddajaxtabs("adminwrap", "inner")
admin.setpersist(false)
admin.setselectedClassTarget("link") //"link" or "linkparent"
admin.init()
</script>

Behavior is that the drop down menu never shows on click, and the admin.php page from the anchor link starts doing an ajax fetch on page load. Demo page is the same:
http://web.science.nd.edu/bestbuddies/playground/welcome.php

[ddadmin]

I've attached a working demo below.