datonn
12-16-2004, 06:39 AM
I'm hoping someone out there can help me. I am building a web site for my local small-town Chamber of Commerce, and I am having some trouble having a horizontal drop-down menu to display properly (or at all). The puzzling thing to me is that I copied the .js, .css and .dwt template files from a working site that I built to serve as the basis for the new site's template.....but the new template will not display the javascript menu for some reason, even though I redirected all of the links and references back to the new files.
The template code that is not functioning properly is listed at the bottom of this message. I think the problem lies somewhere in the div id="navigation" area of my code (lines 70-78), but I've tried about 20 things tonight without any resolution. I'm sure I'm just having problems because I am still learning how to create javascript menus, so I am hoping someone will take a minute or two to help me figure out the problem that is probably right under my nose... :o
Thanks in advance for any advice anyone can offer!
Derek
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Springfield Chamber Web Site Template</title>
<!-- TemplateEndEditable --><link rel="stylesheet" href="navigation.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 10px;
}
.style1 {color: #000000}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
color: #00897C;
}
a:visited {
color: #00897C;
}
.style3 {font-size: 10px}
a:hover {
color: #00897C;
}
a:active {
color: #990000;
}
-->
</style>
</head>
<body onmousemove="closesubnav(event);">
<script language="JavaScript" type="text/javascript" src="Templates/chambermenu.js"></script>
<div id="siteName"><a href="../index.htm"><img src="../images/chamber_logo.gif" alt="Springfield (MN) Area Chamber of Commerce Logo and Link" width="759" height="97" border="0"></a></div>
<script language="JavaScript" type="text/javascript">
<!--//
window.focus();
//-->
</script>
<div id="navigation">
<script language="JavaScript" type="text/javascript">
var MENU_ITEMS =[
["About Us", "http://www.tonnhaus.com/temp/springfieldchamber/aboutus.htm",
["History", "http://www.tonnhaus.com/temp/springfieldchamber/history.htm"],
["Membership List", "http://www.tonnhaus.com/temp/springfieldchamber/aboutus/member_list.htm"],
["How to Join", "http://www.tonnhaus.com/temp/aboutus/join.htm"]
],
["Chamber News", "http://www.tonnhaus.com/temp/springfieldchamber/news.htm",
["Announcements", "http://www.tonnhaus.com/temp/springfieldchamber/announcements.htm"],
["Member Spotlight", "http://www.tonnhaus.com/temp/springfieldchamber/spotlight.htm"]
],
["Calendar", "http://www.tonnhaus.com/temp/springfieldchamber/calendar.htm",
["General Board Meetings", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/board.htm"],
["Retail Board Meetings", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/retail.htm"],
["Community Events", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/events.htm"]
],
["Doing Business in Springfield", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources.htm",
["Economic Development Authority", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources/eda.htm"],
["Real Estate", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources/real_estate.htm"]
],
["Other Links", "http://www.tonnhaus.com/temp/springfieldchamber/links.htm",
["City of Springfield", "http://www.springfieldmn.org"],
["Brown County", "http://www.co.brown.mn.us/"],
["Springfield Area Foundation", "http://www.springfieldmn.org/alltown/saf.html"]
],
["Contact Us", "http://www.tonnhaus.com/temp/springfieldchamber/contact.htm"],
];
/* --- geometry and timing of the menu --- */
var MENU_POS = new Array();
// item sizes for different levels of menu
MENU_POS['height'] = [22, 22, 22, 22];
MENU_POS['width'] = [125, 150, 150, 150];
// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS['block_top'] = [0, 23, 0, 0];
MENU_POS['block_left'] = [15, 0, 151, 151];
// offsets between items of the same level
MENU_POS['top'] = [0, 23, 23, 23];
MENU_POS['left'] = [127, 0, 0, 0];
// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS['hide_delay'] = [300, 300, 300, 300];
/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/
var MENU_STYLES = new Array();
// default item state when it is visible but doesn't have mouse over
MENU_STYLES['onmouseout'] = [
'background', ['#5A8ABD', '#5A8ABD', '#5A8ABD', '#5A8ABD'],
'color', ['#ffffff', '#ffffff', '#ffffff', '#ffffff'],
];
// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#ADC1CC', '#ADC1CC', '#ADC1CC', '#ADC1CC'],
'color', ['#000000', '#000000', '#000000', '#000000'],
];
// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#00897C', '#00897C', '#00897C', '#00897C'],
'color', ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'],
];
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
window.focus();
</script>
</div>
<div id="content"><br>
<!-- TemplateBeginEditable name="Written Content" -->Written Content<!-- TemplateEndEditable --></div>
<br><br>
<div id="siteInfo"><div align="center">
<form action="http://www.google.com/custom">
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<input type="text" name="q" size="40" maxlength="255" value="">
<input type="submit" name="btnG" value="Search">
<input type="hidden" name="safe" value="vss">
<input type="hidden" name="cof" value="GL:0;BGC:#FFFFFF;T:#000000;GALT:#000000;GIMP:#000000;GFNT:#000000;LC:#006699;ALC:#006699;VLC:#006699 ;">
<input type=hidden name=domains value="www.tonnhaus.com/temp/region5">
<br>
<input type=radio name=sitesearch value="">internet (via Google)
<input type=radio name=sitesearch value="www.tonnhaus.com/temp/springfieldchamber" checked>Springfield Area Chamber<br>
</td>
</tr>
</table>
</form>
</div>
<br>
<p align="center"><a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | © 2005 <a href="#">Springfield Area Chamber of Commerce </a><br>
<span class="style3">Site Designed by <a href="http://www.tonnhaus.com" target="_blank">tonnhaus design</a>. Last Updated: December 15, 2004</span>
</p>
</div>
</body>
</html>
The template code that is not functioning properly is listed at the bottom of this message. I think the problem lies somewhere in the div id="navigation" area of my code (lines 70-78), but I've tried about 20 things tonight without any resolution. I'm sure I'm just having problems because I am still learning how to create javascript menus, so I am hoping someone will take a minute or two to help me figure out the problem that is probably right under my nose... :o
Thanks in advance for any advice anyone can offer!
Derek
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Springfield Chamber Web Site Template</title>
<!-- TemplateEndEditable --><link rel="stylesheet" href="navigation.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 10px;
}
.style1 {color: #000000}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
color: #00897C;
}
a:visited {
color: #00897C;
}
.style3 {font-size: 10px}
a:hover {
color: #00897C;
}
a:active {
color: #990000;
}
-->
</style>
</head>
<body onmousemove="closesubnav(event);">
<script language="JavaScript" type="text/javascript" src="Templates/chambermenu.js"></script>
<div id="siteName"><a href="../index.htm"><img src="../images/chamber_logo.gif" alt="Springfield (MN) Area Chamber of Commerce Logo and Link" width="759" height="97" border="0"></a></div>
<script language="JavaScript" type="text/javascript">
<!--//
window.focus();
//-->
</script>
<div id="navigation">
<script language="JavaScript" type="text/javascript">
var MENU_ITEMS =[
["About Us", "http://www.tonnhaus.com/temp/springfieldchamber/aboutus.htm",
["History", "http://www.tonnhaus.com/temp/springfieldchamber/history.htm"],
["Membership List", "http://www.tonnhaus.com/temp/springfieldchamber/aboutus/member_list.htm"],
["How to Join", "http://www.tonnhaus.com/temp/aboutus/join.htm"]
],
["Chamber News", "http://www.tonnhaus.com/temp/springfieldchamber/news.htm",
["Announcements", "http://www.tonnhaus.com/temp/springfieldchamber/announcements.htm"],
["Member Spotlight", "http://www.tonnhaus.com/temp/springfieldchamber/spotlight.htm"]
],
["Calendar", "http://www.tonnhaus.com/temp/springfieldchamber/calendar.htm",
["General Board Meetings", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/board.htm"],
["Retail Board Meetings", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/retail.htm"],
["Community Events", "http://www.tonnhaus.com/temp/springfieldchamber/calendar/events.htm"]
],
["Doing Business in Springfield", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources.htm",
["Economic Development Authority", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources/eda.htm"],
["Real Estate", "http://www.tonnhaus.com/temp/springfieldchamber/business_resources/real_estate.htm"]
],
["Other Links", "http://www.tonnhaus.com/temp/springfieldchamber/links.htm",
["City of Springfield", "http://www.springfieldmn.org"],
["Brown County", "http://www.co.brown.mn.us/"],
["Springfield Area Foundation", "http://www.springfieldmn.org/alltown/saf.html"]
],
["Contact Us", "http://www.tonnhaus.com/temp/springfieldchamber/contact.htm"],
];
/* --- geometry and timing of the menu --- */
var MENU_POS = new Array();
// item sizes for different levels of menu
MENU_POS['height'] = [22, 22, 22, 22];
MENU_POS['width'] = [125, 150, 150, 150];
// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS['block_top'] = [0, 23, 0, 0];
MENU_POS['block_left'] = [15, 0, 151, 151];
// offsets between items of the same level
MENU_POS['top'] = [0, 23, 23, 23];
MENU_POS['left'] = [127, 0, 0, 0];
// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS['hide_delay'] = [300, 300, 300, 300];
/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/
var MENU_STYLES = new Array();
// default item state when it is visible but doesn't have mouse over
MENU_STYLES['onmouseout'] = [
'background', ['#5A8ABD', '#5A8ABD', '#5A8ABD', '#5A8ABD'],
'color', ['#ffffff', '#ffffff', '#ffffff', '#ffffff'],
];
// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#ADC1CC', '#ADC1CC', '#ADC1CC', '#ADC1CC'],
'color', ['#000000', '#000000', '#000000', '#000000'],
];
// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#00897C', '#00897C', '#00897C', '#00897C'],
'color', ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'],
];
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
window.focus();
</script>
</div>
<div id="content"><br>
<!-- TemplateBeginEditable name="Written Content" -->Written Content<!-- TemplateEndEditable --></div>
<br><br>
<div id="siteInfo"><div align="center">
<form action="http://www.google.com/custom">
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<input type="text" name="q" size="40" maxlength="255" value="">
<input type="submit" name="btnG" value="Search">
<input type="hidden" name="safe" value="vss">
<input type="hidden" name="cof" value="GL:0;BGC:#FFFFFF;T:#000000;GALT:#000000;GIMP:#000000;GFNT:#000000;LC:#006699;ALC:#006699;VLC:#006699 ;">
<input type=hidden name=domains value="www.tonnhaus.com/temp/region5">
<br>
<input type=radio name=sitesearch value="">internet (via Google)
<input type=radio name=sitesearch value="www.tonnhaus.com/temp/springfieldchamber" checked>Springfield Area Chamber<br>
</td>
</tr>
</table>
</form>
</div>
<br>
<p align="center"><a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | © 2005 <a href="#">Springfield Area Chamber of Commerce </a><br>
<span class="style3">Site Designed by <a href="http://www.tonnhaus.com" target="_blank">tonnhaus design</a>. Last Updated: December 15, 2004</span>
</p>
</div>
</body>
</html>