Make Anylink CSS OnClick Without Errors

[kellerbrooke]

1) Script Title: AnyLink CSS Menu

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

3) Describe problem: I'm going completely nuts here!!! I tried to alter the coding for this script so that it would allow onclicks rather than mouseovers. Well, it works, BUT there's an error:

Line: 1
Char: 1
Error: 'dropmenuobj' is undefined
Code: 0

My External JS:

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var appeardelay=500 //menu appear speed onMouseover (in miliseconds)

var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)

var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)

var anylinkmenuwidth="200px" //default menu width


//CUSTOM MOD (Feb 11th, 08'): Added ability to set delay before menu appears/ drop downs


/////No further editting needed


var ie5=document.all

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

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){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top='-500px'
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=ie5 && !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=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !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 delaydropdownmenu(obj, e, dropmenuID, menuwidth){ //CUSTOM FUNCTION
clearshowmenu()
if (ie5 && !window.opera){ //In IE, event object becomes inaccurate when called via setTimeout, so create a makeshift event object
var eventType=e.type
var e={}
e.type=eventType
}
delayreveal=setTimeout(function(){dropdownmenu(obj, e, dropmenuID, menuwidth)}, appeardelay)
return clickreturnvalue()
}


function dropdownmenu(obj, e, dropmenuID,menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

if (typeof dropmenuobj!="undefined") //hide previous menu

dropmenuobj.style.visibility="hidden"

clearhidemenu()

if (ie5||ns6){
obj.onmouseout=delayhidemenu

dropmenuobj=document.getElementById(dropmenuID)
dropmenuobj.style.width=(typeof menuwidth!="undefined")? menuwidth : anylinkmenuwidth


dropmenuobj.style.visibility="hidden";

if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
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 ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function delayhidemenu(){
clearshowmenu()
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}

function clearshowmenu(){
if (typeof delayreveal!="undefined")
clearTimeout(delayreveal)
}

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




My Body HTML:

<a class="menutwo" href="http://www.themebath" onclick="return dropdownmenu(this, event, 'anylinkmenu2')" onMouseout="delayhidemenu()"></a>

<div id="anylinkmenu2" class="anylinkcss">

<table class="styles" cellpadding=10 cellspacing=0 border=0 bgcolor=#ffffff>
<tr>

<td valign=top>
<a href="coastal-bathroom-decor.aspx"><FONT size=1>Coastal Bathroom Decor</FONT></a>
<a href="contemporary-bathroom-decor.aspx"><FONT size=1>Contemporary Bathroom Decor</FONT></a>
<a href="country-bathroom-decor.aspx"><FONT size=1>Country Bathroom Decor</FONT></a>
<a href="kid-bathroom-decor.aspx"><FONT size=1>Kid and Teen Bathroom Decor</FONT></a>
<a href="lodge-bathroom-decor.aspx"><FONT size=1>Lodge and Cabin Bathroom Decor</FONT></a>
<a href="novelty-bathroom-decor.aspx"><FONT size=1>Novelty Bathroom Decor</FONT></a>
<a href="traditional-bathroom-decor.aspx"><FONT size=1>Traditional Bathroom Decor</FONT></a>
</td>

</tr>
</table>

</div>


Can anyone help me? Thank you so much!!!

[kellerbrooke]

Has anyone else made the Anylink CSS an onclick version? Thanks!

[ddadmin]

Sure. I'm using the original anylink.js file and modifying it to do this btw, since I"m not sure what custom version you're citing above. First, within your page's HTML, the anchor links would be modified to use "onClick" as the event handler:

<a href="http://www.dynamicdrive.com" onClick="return dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a>

Then, using the modified anylink.js file attached does the trick.

[kellerbrooke]

Thank you so much ddadmin!!!!!

It works with no errors. It looks like I needed to remove onMouseout="delayhidemenu()" from the code. I'm not an expert with js, so I really appreciate your help!!!

The modified external js file you provided works great! Thank you again!!!