Page 1 of 1

Javascript menu not appearing in FireFox

Posted: Wed Nov 10, 2004 9:30 am
by dardsemail
Hi,

I have coded javascript drop down menus that work beautifully in IE and Safari, but I seem to be getting errors in Firefox and the menus are not appearing.

The error message I get is:

javascript menuname is not defined

Here is my trigger code:

Code: Select all

<div class="navbar" onmouseover="visible(collection)"
onmouseout="hidden(collection)"><td onmouseover="visible(collection)"
onmouseout="hidden(collection)" width="10%" align="center">
		<a href="content.php?section=collection&subsection=atelier&page=atelier" onMouseOver="visible(collection)" onMouseOut="hidden(collection)"><img src="images/collections.gif" border="0"></a></td></div>
Here is my javascript code:

Code: Select all

<script language="Javascript">
	
	function visible(id)
	&#123;
	id.style.visibility="visible";
	&#125;

	function hidden(id)
	&#123;
	id.style.visibility="hidden";
	&#125;

	</script>
I'm extremely new to javascript, so I don't fully understand all the parameters.

If anyone can help - I would be greatly appreciative!

Thanks!

Posted: Wed Nov 10, 2004 10:02 am
by pickle
Well, I don't see where you call menuname, so posting that code might be helpful as well. Maybe just dump the whole part of the page concerning this problem, so we can see it in context.

Usually when I have a problem like this, it's a single character - wrong quote or semi-colon somewhere.

Posted: Wed Nov 10, 2004 10:37 am
by dardsemail
Hi,

Sorry to confuse, I should have been more clear. I actually don't call 'menuname'. The menus are linked to 5 different CSS ids which are positioned in an absolute manner on the page. I used 'menuname' as I get the same message no matter what menu I try and call. Here's the full page of code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Avocado Atelier - About Avocado</title>
	<link href="avocado.css" rel="stylesheet" type="text/css" />

	<script language="Javascript">
	
	function visible(id)
	&#123;
	id.style.visibility="visible";
	&#125;

	function hidden(id)
	&#123;
	id.style.visibility="hidden";
	&#125;

	</script>
	
<script type="text/javascript">
		<!--
		function getWindowHeight() &#123;
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') &#123;
				windowHeight = window.innerHeight;
			&#125;
			else &#123;
				if (document.documentElement && document.documentElement.clientHeight) &#123;
					windowHeight = document.documentElement.clientHeight;
				&#125;
				else &#123;
					if (document.body && document.body.clientHeight) &#123;
						windowHeight = document.body.clientHeight;
					&#125;
				&#125;
			&#125;
			return windowHeight;
		&#125;
		function setFooter() &#123;
			if (document.getElementById) &#123;
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) &#123;
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) &#123;
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					&#125;
					else &#123;
						footerElement.style.position = 'static';
					&#125;
				&#125;
			&#125;
		&#125;
		window.onload = function() &#123;
			setFooter();
		&#125;
		window.onresize = function() &#123;
			setFooter();
		&#125;
		//-->
		</script>
</head>
<body>

	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td><img id="watermark" src="images/AVO_watermark.jpg" border="0">
			<a href="index.php"><img id="navlogo" src="images/avocadologo.gif" border="0"></a>
			<img id="madetomeasure" src="images/madetomeasure.gif" border="0">
			<div id="loginbar">
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<TD height="25px" align="center" width="120px"><a href="login.php"><IMG SRC="images/loginregistration.gif" border="0"></a></TD>

		<TD align="center" width="5px"><IMG SRC="images/line.gif"></TD>
		<TD align="center" width="120px"><a href="bookappt.php"><IMG SRC="images/makeappt.gif" border="0"></a></TD>
		<TD align="center" width="5px"><IMG SRC="images/line.gif"></TD>
		<TD align="center" width="75px"><a href="content.php?section=aboutav&subsection=avlocations&page=avlocations"><IMG SRC="images/locations.gif" border="0"></a></TD>
	</TR>
</table>
</div>			</td>
		</tr>
	</table>

<hr id="hr" width="100%" color="#333333" size="1px">
<div id="topnav">
<table cellspacing=0 cellpadding=0 border=0>
	<tr>
		<div class="navbar" onmouseover="visible(collection)"
onmouseout="hidden(collection)"><td onmouseover="visible(collection)"
onmouseout="hidden(collection)" width="10%" align="center">
		<a href="content.php?section=collection&subsection=atelier&page=atelier" onMouseOver="visible(collection)" onMouseOut="hidden(collection)"><img src="images/collections.gif" border="0"></a></td></div>
		<div class="navbar" onmouseover="visible(aboutus)"
onmouseout="hidden(aboutus)"><td onmouseover="visible(aboutus)"
onmouseout="hidden(aboutus)" width="10%" align="center">
		<a href="content.php?section=aboutav&subsection=aboutav&page=aboutav" onMouseOver="visible(aboutus)" onMouseOut="hidden(aboutus)"><img src="images/aboutus.gif" border="0"></a></td></div>
		<div class="navbar" onmouseover="visible(wellbeing)"
onmouseout="hidden(wellbeing)"><td onmouseover="visible(wellbeing)"
onmouseout="hidden(wellbeing)" width="10%" align="center">
		<a href="content.php?section=wellbeing&page=takingcare" onMouseOver="visible(wellbeing)" onMouseOut="hidden(wellbeing)"><img src="images/avocommunity.gif" border="0"></a></td></div>

		<div class="navbar" onmouseover="visible(press)"
onmouseout="hidden(press)"><td onmouseover="visible(press)"
onmouseout="hidden(press)" width="10%" align="center">
		<a href="content.php?section=press&subsection=avocadoinmedia&page=avocadoinmedia" onMouseOver="visible(press)" onMouseOut="hidden(press)"><img src="images/press.gif" border="0"></a></td></div>
		<td width="10%" align="center">
		<img src="images/fashionconsultants.gif" border="0"></td>
	</tr>
</table>
</div>
<div class="collection" id="collection" 
onmouseover="visible(collection)"
onmouseout="hidden(collection)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=atelier&page=atelier'" title="Atelier Avocado Collection">Atelier Avocado Collection</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->
			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=avfabrics&page=avfabrics'" title="Atelier Avocado Fabrics">Atelier Avocado Fabrics</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=couture&page=couture'" title="Avocado Couture">Avocado Couture</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->
			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=studio&page=studio'" title="Studio Collection">Studio Collection</td>
			</td>
		</tr>		<!-- End Cell -->

</table>
</div>

<div class="aboutus" id="aboutus" 
onmouseover="visible(aboutus)"
onmouseout="hidden(aboutus)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avphilosophy&page=avphilosophy'" title="Our Passion">Our Passion</td>
			</td>
		</tr>

		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=aboutav&page=aboutav'" title="About Avocado">About Avocado</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avprocess&page=avprocess'" title="Our Process">Our Process</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avpeople&page=avpeople'" title="Our People">Our People</td>
			</td>

		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avcareers&page=avcareers'" title="Career Opportunities">Career Opportunities</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avlocations&page=avlocations'" title="Locations">Locations</td>
			</td>
		</tr>
				<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='contactus.php?'" title="Contact Us">Contact Us</td>
			</td>

		</tr>
		<!-- End Cell -->
</table>
</div>

<div class="wellbeing" id="wellbeing" 
onmouseover="visible(wellbeing)"
onmouseout="hidden(wellbeing)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=wellbeing&subsection=avwoman&page=avwoman'" title="Avocado Woman">Avocado Woman</td>

			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=wellbeing&subsection=charitablefoundation&page=charitablefoundation'" title="Atelier Avocado Fund for Women and Children">Atelier Avocado Fund for Women and Children</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=wellbeing&subsection=takingcare&page=takingcare'" title="Taking Care of Yourself">Taking Care of Yourself</td>
			</td>
		</tr>		<!-- End Cell -->
</table>
</div>

<div class="press" id="press" 
onmouseover="visible(press)"
onmouseout="hidden(press)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=press&subsection=avocadoinmedia&page=avocadoinmedia'" title="Avocado in the Media">Avocado in the Media</td>
			</td>
		</tr>
				<!-- End Cell -->
</table>
</div>

<div id="fashcons">
</div><div id="content">
<table border="0" cellspacing="0" cellpadding="0">
	<tr>

		<td height="20px" valign="top"><br /><h1>About Avocado</h1>
		</td>
	</tr>
	<tr>	
		<td valign="top" align="justify">
								<img src="images/collection/0918549-R4-029-13cropped.gif" class="floatright" /><h3><p>content</h3>

							</td>
	</tr>
</table>
</div>
<div id="footer">
<hr width="100%" color="#000000" size="1px">
	<br />
		<table align="center" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td align="center"><h6><a href="fineprint?page=privacy">Privacy Statement</a> / Terms of Use / Investor Relations</h6>

				</td>
			</tr>
		</table>
</div>
</body>
</html>

Posted: Wed Nov 10, 2004 1:01 pm
by pickle
I'm not to experienced with this level of DHTML, but my initial guess would be your having a problem with the calls to visible() and hidden() in your trigger code (in your initial post). In the trigger code, you pass just 'collection'. Is 'collection' defined somewhere? Firefox is probably having probelms with the fact that it's not. I think this would work:

Trigger code:

Code: Select all

<div class="navbar" onmouseover="visible('collection')" onmouseout="hidden('collection')">
   <td onmouseover="visible('collection')"  onmouseout="hidden('collection')" width="10%" align="center">
      <a href="content.php?section=collection&subsection=atelier&page=atelier" onMouseOver="visible('collection')" onMouseOut="hidden('collection')">
         <img src="images/collections.gif" border="0">
      </a>
   </td>
</div>
Notice the quotes around 'collection'

JS code

Code: Select all

<script language="Javascript">
   function visible(p_id)
   &#123;
      var id = document.getElementById(p_id);
      id.style.visibility="visible";
   &#125;

   function hidden(p_id)
   &#123;
      var id = document.getElementById(p_id);
      id.style.visibility="hidden";
   &#125;
</script>

Posted: Wed Nov 10, 2004 9:51 pm
by dardsemail
You are the man! Thank you so much! Worked like a charm!