AnyLink Drop Down Issue w/Joomla

[jkilgor1]

1) Script Title: Anylink Drop Down Menu

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

3) Describe problem:

I am developing a site with Joomla that was previously created by a co-worker. He is no longer with the firm but did make use of the Anylink Drop Down Menu. For some reason the coding no longer works and I can't figure out why.

Even when the code is placed in properly from the site and information changed to match the menus I want set up, once save it alters. The line of text that I want linked with drop down shows up and is correctly formatted to the style but no drop down. And even though the menu are placed in correctly when saved it adds '. Any help would be appreciated.

The code right now is:

<style type="text/css">#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 1;
font:normal 10px Verdana;
line-height:12px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}</style>
<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'

//Contents for menu 2 
var menu2=new Array()
menu2[0]='<a href="#">2a</a>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="#">3a</a>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="#">4A</a>'

//Contents for menu 5
var menu5=new Array()
menu5[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'

//Contents for menu 6
var menu6=new Array()
menu6[0]='<a href="#">#</a>'

//Electrical menu 7 
var menu7=new Array()
menu7[0]='<a href="#">7a</a>'

//Contents for menu 8
var menu8=new Array()
menu8[0]='<a href="#">8a</a>'

//Contents for menu 9
var menu9=new Array()
menu9[0]='<a href="#">9a</a>'

//Contents for menu 10
var menu10=new Array()
menu10[0]='<a href="#">10a</a>'

//Contents for menu 11
var menu11=new Array()
menu11[0]='<a href="#">11a</a>'

//Contents for menu 12
var menu12=new Array()
menu12[0]='<a href="#">12a</a>'

//Contents for menu 13
var menu13=new Array()
menu13[0]='<a href="#">13a</a>'

//Contents for menu 14
var menu14=new Array()
menu14[0]='<a href="#">14a</a>'

//Contents for menu 15
var menu15=new Array()
menu15[0]='<a href="#">15a</a>'

//Contents for menu 16
var menu16=new Array()
menu16[0]='<a href="#">16a</a>'
		
var menuwidth='200px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=265  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


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()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>



The code for the text link:
<td class="codepgstyle" width="3%">&nbsp;</td>
<td style="border-bottom: #ff6699 thin groove;" class="codepgstyle" width="80%"><span style="border-bottom: #660033 thin groove;" class="codepgstyle"><a id="whitelink" onmouseover="dropdownmenu(this, event, menu5, '200px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()" href="http://dev.countybldgcodes.com/#">Additional Codes in Effect</a></span></td>
<td class="codepgstyle" width="9%"><span style="border-bottom: #666666 thin groove;"><a onmouseover="dropdownmenu(this, event, menu5, '200px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()" href="http://dev.countybldgcodes.com/#"><img height="12" alt="arrow" src="http://dev.countybldgcodes.com/images/main_codes/readon.gif" width="12" align="baseline" border="0" /></a></span></td>
<td>&nbsp;</td></tr></tbody></table></td></tr></tbody></table>

[ddadmin]

Please try and format any code in your post using the CODE tags. It just makes it easier to read.

Actually, testing the code you posted above, the drop down menu does appear to be working correctly. In other words, I see the sub menu "JavaScript Kit" drop down when the mouse rolls over the anchor link.

Even when the code is placed in properly from the site and information changed to match the menus I want set up, once save it alters.

Not quite sure what you mean by the above, but if you're saying each time you save your page, that the code on it becomes altered slightly, this might have something to do with the HTML editor you're using (ie: MS Frontpage, which does that sometimes).

Finally, there's another version of this menu script, Anylink CSS menu, that you might prefer to use instead if you're not comfortable with editing JavaScript directly to customize the menu contents. In this case, it's just normal HTML.