...

View Full Version : Javascript menu not appearing in IE/Mozilla



datonn
12-16-2004, 07: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> | &copy; 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>

hemebond
12-16-2004, 08:53 PM
[code] (http://codingforums.com/misc.php?do=bbcode#code) tags please.

datonn
12-16-2004, 11:57 PM
message deleted

hemebond
12-17-2004, 12:25 AM
It is possible to delete your post entirely.

I think I need
Templates/chambermenu.jsor at least a link to where you got this all from.

datonn
12-17-2004, 12:45 AM
hemebond,

Sorry if my posts are a little confusing. I'm still learning all this stuff. :o

Here's the code from my chambermenu.js file. If folks think I should take this thread down, please let me know. I'm not trying to cause trouble....just looking for a little friendly advice on why this javascript menu works flawlessly in one place (http://www.tonnhaus.com/temp/region5/) but not in another.

Thanks!



var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items[i].visibility(false);
this.items[i].switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items[id];
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items[i];
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth
+'o" href="../%27%20+%20this.fields%5B1%5D%20+%20%27" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
+ this.id + ');"><div class="m' + this.container.id + 'l' + this.depth + 'i">'
+ this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left'][i]
+ this.arrpath[i] * this.container.pos['left'][i];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top'][i]
+ this.arrpath[i] * this.container.pos['top'][i];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles[state];
for (var i = 0; i < style.length; i += 2)
if (style[i] && style[i+1])
eval('this.element.style.' + style[i] + "='"
+ style[i+1][this.depth] + "';");
}

hemebond
12-17-2004, 02:24 AM
If folks think I should take this thread down, please let me know. I'm not trying to cause trouble....just looking for a little friendly advice on why this javascript menu works flawlessly in one placeLOL. No dude, your post above where you wrote "message deleted", can be deleted entirely by editing it.

Does this code do anything other than making a simple horizontal drop-down menu? It's inserting the menu fine for me. Can I see your page online?

datonn
12-18-2004, 05:56 AM
hemebond,

Yeah, I'm just trying to be extra-polite/careful....as I'm the guy asking for folks to take a few minutes out of their busy lives to take a look at my code. ;)

To see the code in action (or in-action...ugh), you can visit: http://www.tonnhaus.com/temp/springfieldchamber/aboutus/member_list.htm

What is very strange is that the menu appears without any problem on a dummy "index" page I created (http://www.tonnhaus.com/temp/springfieldchamber/), but it's a no-go in Mozilla/Netscape and IE once you get to any sub-level pages.

The corresponding .js, .css and .dwt files are available via the links below:
1. chambermenu.js - http://tonnhaus.com/temp/springfieldchamber/Templates/chambermenu.js

2. navigation.css - http://tonnhaus.com/temp/springfieldchamber/Templates/navigation.css

3. main_template.dwt - http://tonnhaus.com/temp/springfieldchamber/Templates/main_template.dwt

I've never seen this type of problem before, so I would greatly appreciate anyone out there who might be able to offer any advice as to what might be going on. I have another site that uses the IDENTICAL .css, .js and .dwt menu code, and that site works just great (http://www.tonnhaus.com/temp/region5/).

Thanks in advance for any help that anyone can offer.

Derek

hemebond
12-19-2004, 10:08 PM
On the page that doesn't work, you've included your CSS file with
<link rel="stylesheet" href="../Templates/navigation.css" type="text/css">but you've included your Javascript file with
<script language="JavaScript" src="Templates/chambermenu.js"></script>See the difference in URL? Your URL to your script isn't jumping up a directory first with
../Also
language="javascript"is depreciated and should be replaced with
type="text/javascript"Of course, using Javascript to generate important menus like this is very bad practice. Here's how I would have created that page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- InstanceBegin template="/Templates/main_template.dwt" codeOutsideHTMLIsLocked="false" -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- InstanceBeginEditable name="doctitle" -->
<title>Springfield, Minnesota Chamber of Commerce Web Site</title>
<!-- InstanceEndEditable -->

<style type="text/css">
img {
border:0;
}
ul {
padding:0;
margin:0;
}

body {
padding:0;
margin:0;
width:760px;
}
h1 {
padding:0;
margin:0;
}

#navigation {
list-style:none;
line-height:1em;
height:2em;
border:1px solid #000;
color:#fff;
}
#navigation li {
float:left;
text-align:center;
position:relative;
background-color:rgb(109, 155, 200);
width:100%;
}
#navigation a {
display:block;
text-decoration:none;
color:inherit;
padding:0.5em 0;
}
#navigation a:hover {
background-color:#adc1cc;
color:#000;
}

#navigation ul {
display:none;
position:absolute;
top:2em;
left:-1px;
list-style:none;
border:solid #000;
border-width:0 1px 1px;
}
#navigation li:hover ul {
display:block;
}
#navigation ul li {
text-align:left;
}

#content form {
text-align:center;
}
#content form fieldset {
border:0;
}

#foot {
text-align:center;
}
#foot ul {
list-style:none;
display:inline;
}
#foot li {
display:inline;
border-right:1px solid #000;
margin-right:0.25em;
padding-right:0.5em;
}
#foot p {
display:inline;
}
</style>
</head>

<body>
<h1>
<a href="http://tonnhaus.com/temp/springfieldchamber/index.htm">
<img src="Springfield,%20Minnesota%20Chamber%20of%20Commerce%20Web%20Site_files/chamber_logo.gif" alt="Springfield (MN) Area Chamber of Commerce">
</a>
</h1>

<ul id="navigation">
<li style="width:114px">
<a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus.htm">About Us</a>
<ul>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus/history.htm">History</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus/benefits.htm">Member Benefits</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus/boards.htm">Board Members</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus/member_list.htm">Membership List</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/aboutus/join.htm">How to Join</a></li>
</ul>
</li>
<li style="width:140px">
<a href="http://www.tonnhaus.com/temp/springfieldchamber/news.htm">Chamber News</a>
<ul>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/news/announcements.htm">Announcements</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/news/spotlight.htm">Member Spotlight</a></li>
</ul>
</li>
<li style="width:140px">
<a href="http://www.tonnhaus.com/temp/springfieldchamber/calendar.htm">Calendar</a>
<ul>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/calendar/board.htm">General Board Mtgs</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/calendar/retail.htm">Retail Board Meetings</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/calendar/events.htm">Chamber Events</a></li>
</ul>
</li>
<li style="width:124px">
<a href="http://www.tonnhaus.com/temp/springfieldchamber/business_resources.htm">Area Resources</a>
<ul>
<li><a href="http://www.springfieldmn.org/busind/parkeda.html">Springfield EDA</a></li>
<li><a href="http://www.tonnhaus.com/temp/springfieldchamber/business_resources/realestate.htm">Real Estate</a></li>
<li><a href="http://www.springfieldmn.org/">City of Springfield</a></li>
<li><a href="http://www.co.brown.mn.us/">Brown County</a></li>
<li><a href="http://www.springfieldmn.org/alltown/saf.html">Area Foundation</a></li>
</ul>
</li>
<li style="width:120px"><a href="http://www.tonnhaus.com/temp/springfieldchamber/links.htm">Other Links</a></li>
<li style="width:120px"><a href="http://www.tonnhaus.com/temp/springfieldchamber/contact.htm">Contact Us</a></li>
</ul>

<div id="content">
<!-- InstanceBeginEditable name="Written Content" -->
<p>
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text. Sample Page Text. Sample Page Text.
Sample Page Text. Sample Page Text.
</p>
<p>
Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text. Sample Page Text. Sample Page Text. Sample Page Text. Sample
Page Text.
</p>
<!-- InstanceEndEditable -->

<form action="http://www.google.com/custom" method="get">
<fieldset>
<input name="safe" type="hidden" value="vss">
<input name="cof" type="hidden" value="GL:0;BGC:#FFFFFF;T:#000000;GALT:#000000;GIMP:#000000;GFNT:#000000;LC:#006699;ALC:#006699;VLC:#006699 ;">
<input name="domains" type="hidden" value="www.tonnhaus.com/temp/region5">

<div>
<input name="q" type="text" size="40" maxlength="255" value="">
<input type="submit" value="Search">
</div>

<input id="google" name="sitesearch" type="radio" value="">
<label for="google">internet (via Google)</label>

<input id="region5" name="sitesearch" type="radio" checked="checked" value="www.tonnhaus.com/temp/region5">
<label for="region5">ACCED-I Region 5</label>
</fieldset>
</form>
</div>

<div id="foot">
<ul>
<li><a href="http://tonnhaus.com/temp/springfieldchamber/sitemap.htm">Site Map</a></li>
<li><a href="http://tonnhaus.com/temp/springfieldchamber/privacy.htm">Privacy Policy</a></li>
</ul>
<p>
&copy; 2005 <a href="http://www.springfieldmnchamber.org/">Springfield Chamber of Commerce</a>
<br>
Site Designed by <a href="http://www.tonnhaus.com/">tonnhaus design</a>.
Last Updated: December 16, 2004
</p>
</div>
<!-- InstanceEnd -->
</body>
</html>Not my best, but it should give you some idea.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum