AnyLink Vertical Menu not working :(

[justicefish]

script: AnyLink Vertical Menu
url: http://www.dynamicdrive.com/dynamici...nkvertical.htm

I am not sure why the menu doesn't work, browser said it have syntax error at all the line for the navlist

The code in the webpage was generated by the server side using vb.net, it's kind of messy.

anyLinkVer.js

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////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: 160px" 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=-500
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-obj.offsetWidth < 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 menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
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")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"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)
}

a webpage with genertaed code that use the menu

 
<table cellspacing="0" cellpadding="0" width="760" border="0">
    <tbody>
        <tr>
            <td valign="top" align="left" colspan="2"><embed src="/UserFiles/Flash/header.swf" width="760" height="326" type="application/x-shockwave-flash" scale="" play="" loop="" menu=""></embed></td>
        </tr>
        <tr>
            <td valign="top" align="left" colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top" align="left" width="206">
            <p align="left"><script src='js/anylinkVer.js'></script>
<script>
//Contents for menu 0
var menu0 = new Array();

//Contents for menu 1
var menu1 = new Array();
menu1[0]='<a href='default.aspx?pageId=48'>Overview</a>';
menu1[1]='<a href='default.aspx?pageId=26'>Ethos and Vision</a>';
menu1[2]='<a href='default.aspx?pageId=27'>Organisation Structure</a>';
menu1[3]='<a href='default.aspx?pageId=28'>Contact Us</a>';

//Contents for menu 2
var menu2 = new Array();
menu2[0]='<a href='default.aspx?pageId=29'>Lesson Plans</a>';
menu2[1]='<a href='default.aspx?pageId=30'>Class Resources</a>';
menu2[2]='<a href='default.aspx?pageId=31'>Multimedia</a>';
menu2[3]='<a href='default.aspx?pageId=108'>Under education</a>';

//Contents for menu 3
var menu3 = new Array();
menu3[0]='<a href='default.aspx?pageId=32'>Upcoming events</a>';
menu3[1]='<a href='default.aspx?pageId=33'>Mailing List</a>';
menu3[2]='<a href='default.aspx?pageId=34'>Podcasts of Recent Lectures</a>';
menu3[3]='<a href='default.aspx?pageId=35'>Blog</a>';

//Contents for menu 4
var menu4 = new Array();
menu4[0]='<a href='default.aspx?pageId=37'>In the museum</a>';
menu4[1]='<a href='default.aspx?pageId=38'>Classroom Resources</a>';
menu4[2]='<a href='default.aspx?pageId=39'>Interactive Games</a>';
menu4[3]='<a href='default.aspx?pageId=40'>Useful Links</a>';
menu4[4]='<a href='default.aspx?pageId=41'>Audio Tours</a>';

//Contents for menu 5
var menu5 = new Array();
menu5[0]='<a href='default.aspx?pageId=46'>Workshops</a>';
menu5[1]='<a href='default.aspx?pageId=47'>Volunteering or Work Experience Opportunity</a>';

//Contents for menu 6
var menu6 = new Array();
menu6[0]='<a href='default.aspx?pageId=53'>Past Exhibitions</a>';
menu6[1]='<a href='default.aspx?pageId=54'>Galleries</a>';

</script>

<ul class='navlist'>
<li onMouseover='dropdownmenu(this, event, menu0, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=1'>Home</a></li>
<li onMouseover='dropdownmenu(this, event, menu1, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=20'>ABOUT US</a></li>
<li onMouseover='dropdownmenu(this, event, menu2, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=19'>EDUCATORS</a></li>
<li onMouseover='dropdownmenu(this, event, menu3, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=21'>PUBLIC PROGRAMMES</a></li>
<li onMouseover='dropdownmenu(this, event, menu4, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=22'>STUDENT PROGRAMMES</a></li>
<li onMouseover='dropdownmenu(this, event, menu5, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=24'>ONLINE FORMS</a></li>
<li onMouseover='dropdownmenu(this, event, menu6, '150px')' onMouseout='delayhidemenu()'><a href='default.aspx?pageId=51'>EXHIBITION</a></li>
</ul> </p>
            </td>
            <td valign="top" align="left">
            <p><script src='http://app.invent-technology.com/CMS/js/printFriendly.js'></script><a href='javascript:void(printSpecial())'>Print this Page</a></p>
            <p><div id='printReady'><p>This is the Home Page.</p>
<p>Welcome to the home page. </p>
<p><a href="http://www.yahoo.com">Yahoo</a>&nbsp;<img height="112" width="120" alt="" src="/UserFiles/Image/gift/gift06.jpg" /></p>
<p>&nbsp;</p></div></p>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>

<style type="text/css">

#dropmenudiv{
position:absolute;
background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
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: #C7FF5E;
}

/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: square;
width: 135px;
background-color: #FFFFB9;
}

</style>

[jscheuer1]

Were you have (and similar):

<li onMouseover='dropdownmenu(this, event, menu0, '150px')' onMouseout='delayhidemenu()'>

It should be:

<li onMouseover="dropdownmenu(this, event, menu0, '150px')" onMouseout="delayhidemenu()">

And where you have (and similar):

menu1[0]='<a href='default.aspx?pageId=48'>Overview</a>';

It should be:

menu1[0]='<a href="default.aspx?pageId=48">Overview</a>';

Since you seem to indicate that you don't have full control over how the code is generated, if the above changes will not be respected, these versions are also acceptable:

<li onMouseover='dropdownmenu(this, event, menu0, "150px")' onMouseout='delayhidemenu()'>

and:

menu1[0]="<a href='default.aspx?pageId=48'>Overview</a>";

as is:

menu1[0]='<a href=\'default.aspx?pageId=48\'>Overview</a>';

and perhaps:

<li onMouseover='dropdownmenu(this, event, menu0, \'150px\')' onMouseout='delayhidemenu()'>