Undefined Menu Error

[myboyspence]

1) Script Title: AnyLink CSS Vertical Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex1/anylinkcss2.htm

3) Describe problem:

Here is my configuration.

I have taken the code for the CSS Vertical Menu from your site and have created a js file called vertmenu.js and put it in my javascripts folder of my website.

I am using FP as my website editor, but using a CSS menu layout not the normal navigation of FP. I have an include file that represents my navigation menu. When I preview the include file the vertical menu works, but when I go to one of my web pages and preview I get a "menu1 is undefined" error. I'm assuming I just don't have things setup correctly. Here are my scripts

The only thing I changed about your script is the menu1 definition
vertmenu.js



/***********************************************
* AnyLink Vertical 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, and so on
var menu1=new Array()
menu1[0]='<a href="../about_us.htm">About Us</a>'
menu1[1]='<a href="../catalog.htm">Staff & Board</a>'
menu1[2]='<a href="../catalog.htm">Meeting Minutes</a>'
menu1[4]='<a href="../events.htm">Events Calendar</a>'

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


here is my code for the navigation where I have added the include for the js file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- #BeginEditable "doctitle" -->
<title>contact icon</title>
<!-- #EndEditable -->

<!-- #BeginEditable "stylesheet" -->
<link href="../styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="../styles/menu.css" rel="stylesheet" type="text/css">
<script src="../javascript/vertmenu.js" language="JavaScript" type="text/javascript"></script>
<!-- #EndEditable -->


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<script src="../javascript/AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
<script src="../javascript/AC_Macromedia.js" language="JavaScript" type="text/javascript"></script>
</head>

<body>
<table border="0" style="border-collapse: collapse" cellpadding="0">
<tr>
<td class="verticalmenuCSS">
<!--CSS Menu BEGIN-->
<table border="0" style="border-collapse: collapse" width="100"cellpadding="0"><tr><td>
<div id="cssmenu">
<ul class="myVerticalMenu">

<li><a href="../index.htm">Home</a></li>
<li onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><a href="../about_us.htm">Inside the EDC</a></li>
<li><a href="../events.htm" title="Investor Center">Investor Center</a></li>
<li><a href="../about_us.htm" title="Programs & Incentives">Programs</a></li>
<li><a href="../sitemap.htm" title="Resources">Resources</a></li>
<li><a href="../sitemap.htm" title="Properties">Properties</a></li>
<li><a href="../sitemap.htm" title="News">News</a></li>
<li><a href="../contact_us.htm" title="Contact Us">Contact Us</a></li>
<li><a href="../links.htm" title="Links">Links</a></li>
<li><a href="../sitemap.htm" title="Sitemap">Sitemap</a></li>

</ul>
</div>
</td>
</tr>
</table>
<!--CSS Menu END-->
</td>
</tr>
</table>
</body>

</html>

I only have one button setup now for the Mouseover technique. I will add the rest once I get this one working.

Please provided any information you can. I have looked at most postings on your forum and have not found the solution.

Thank you


: DD note: Please format any code in your post using the CODE tag. This makes it a lot easier to read it.

[myboyspence]

I believe I listed the incorrect link to the DD Script. Here is the one I should have used.

http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.htm

I hope someone will be able to help me now.:confused:

[ddadmin]

If I run the HTML page you posted above, it does work, though since there is no CSS for the menu defined, the menu isn't positioned correctly. Anyhow, please post a link to the page on your site that contains the problematic script so we can check it out.

[myboyspence]

The code I gave you was the menu "include" file that I am including in all of my other pages. Yes, it does display correctly in preview mode for this htm, but my problem is the other pages that include this file seems to lose reference to the "menu" variable. Here is a link where my site is posted. You will notice that when you hove over the button "Inside the EDC" it just gives "Error on Page" at the bottom. You can look at the source code of the page. It seems to me that the js script is not being resolved on the include of the other page. Does this make any sense? I neglected to mention that this is also using a dwt template if that makes any difference.

http://s228730012.onlinehome.us/about_us.htm

Thanks for any help provided.

[myboyspence]

I figured my issue out. The javascript file that I was referencing needed to be placed in the dwt file so that the other pages would know what the "menu" variable definition was.

I knew it was a matter of placement of the js or css code, but just wasn't applying it correctly.

Thanks for the script