Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu script works in IE but not Firefox 1

Status
Not open for further replies.
ZCODE

ZCODE

Programmer
Mar 4, 2003
5
0
0
Ok...I am officially bald now that I have pulled all my hair out trying to get this to work.

I have a java script menu that I have been using for years in IE. As this is used on and intranet, having it work on IE only has been ok. But now users are asking for it to work in Firefox/Mozilla. The menu uses a mouseover event to display a drop down menu. On IE the mouse over works, but in Firefox, when you hover over the link, the menu does not appear.

I have posted the code below. Can someone smarter than me take a look and tell me what I'm doing wrong?

Thanks in Advance...

Mike

<HTML>
<HEAD>
<META HTTP-equiv="Content-TYPE" CONTENT="text/HTML; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 4.0">
<TITLE>Z-Poll Online</TITLE>
<LINK REL="STYLESHEET" HREF="<style>
.button { FONT-FAMILY:arial, helvetica, ms sans serif, sans-serif; FONT-SIZE:8pt; COLOR: #FFFFFF; background-color:#6A84AE; font-weight:bold;}
body {background: #00009C; font-size: 10px; font-family: "Tahoma"; font-color: navy}
</STYLE>
</HEAD><SCRIPT LANGUAGE=JAVASCRIPT>
function wldInitialisePage() {
DocLoaded='done' ;
Pressed = false ;
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#00009c">



<FORM ACTION=" method='POST'><INPUT TYPE="HIDDEN" NAME="MGWLPN" VALUE=LOCAL><INPUT TYPE="HIDDEN" NAME="wlapp" VALUE="REPPLUS"><INPUT TYPE="HIDDEN" NAME="guid" VALUE=ya2p4CVhLFixxb9QAa68U8x8gWtOQf>


<SCRIPT LANGUAGE=JAVASCRIPT TYPE=text/JAVASCRIPT>
<!--
No3 = (parseInt(navigator.appVersion) > 3) ? 1:0;
layer = (document.all && No3) ? "document.all['L'+menu].style" : (document.layers && No3) ? "document.layers['L'+menu]" : 0;
var timer;

function Show() { if(layer) {
if(timer) clearTimeout(timer);
for(menu=0; menu<Layer.length; menu++) { if(Layer[menu]) { eval(layer).visibility = "hidden"; } }
for(i=0; i<arguments.length; i++) { menu=arguments; eval(layer).visibility = "visible"; }
} }
function Hide() { timer = setTimeout("Show()", 500); }
//-->

</SCRIPT>
<P></P msnavigation></SPAN></TD></TR></TBODY msnavigation></TABLE>

<TABLE border="1" cellpadding="0" cellspacing="0" WIDTH="750" HEIGHT="17" bgcolor=#29A92D bordercolordark="#FFFFFF" bordercolor="#000080" bordercolorlight="#C0C0C0">
<tr>

<td WIDTH="100" align="center"><font color="WHITE"><b><a onmouseover=Show(1) onmouseout=Hide(1) HREF=" <td WIDTH="100" align="center"><font color="WHITE"><b><a onmouseover=Show(2) onmouseout=Hide(2) HREF=" <td WIDTH="100" align="center"><font color="#FFFFFF"><b><a onmouseover=Show(3) onmouseout=Hide(3) HREF=" <td WIDTH="100" align="center"><font color="#FFFFFF"><b><a onmouseover=Show(4) onmouseout=Hide(4) HREF=" <td WIDTH="100" align="center"><font color="#FFFFFF"><b><a onmouseover=Show(5) onmouseout=Hide(5) HREF=" <td WIDTH="100" align="center"><font color="#FFFFFF"><b><a onmouseover=Show(6) onmouseout=Hide(6) HREF=" <td WIDTH="100" align="center"><font color="#FFFFFF"><b><a HREF=" </tr>
</TABLE>

<SCRIPT LANGUAGE=JAVASCRIPT>
<!--

//////////////////////////////////////////////////////

hovercolor = "#CCCCCC"; // color name/code
bgcolor = "#999999"; // color name/code
background = ""; // picture url

menu_border = 1; // IE only
border_color = "white"; // IE only

arrow_pic = "C:/DATA/REPPLUS/rarrow.gif"; // url of arrow picture for submenus

//////////////////////////////////////////////////////


if(document.all) { if(!background) { background=bgcolor; } else { background = "url("+background+")"; } }

function LayerSpecs(Left,Top,Width) { if(No3) {
if(document.all) { Top+=7; Left+=2; Width+=56; }
this.left = Left;
this.top = Top;
this.info = "";
T=0;
for(i=3; i<arguments.length; i++) {
if(document.all) { this.info += "<TR><TD WIDTH="+Width+" onMouseOver='this.bgColor=\""+hovercolor+"\"' onMouseOut='this.bgColor=\"\"'>"+arguments+"</TD></TR>"; }
else { this.info += "<LAYER onMouseOver='this.bgColor=\""+hovercolor+"\"' onMouseOut='this.bgColor=\""+bgcolor+"\"' WIDTH="+Width+" POSITION=RELATIVE TOP="+T+">&nbsp;"+arguments+"</LAYER>"; }
T+=20;
}
} }

Layer = new Array();
arrow = "<IMG SRC='"+arrow_pic+"' WIDTH=6 HEIGHT=10 BORDER=0 ALT=''>";


//////////////////////////////////////////////

Layer[1] = new LayerSpecs(30,24,120,
'<A HREF= Option</A>',
'<A HREF= Option</A>'
);

Layer[2] = new LayerSpecs(137,24,100,
'<A HREF= Option</A>',
'<A HREF= Option</A>'
);

Layer[3] = new LayerSpecs(240,24,120,
'<A HREF= Option</A>',
'<A HREF= Option</A>'
);

Layer[4] = new LayerSpecs(345,24,120,
'<A HREF= Option</A>',
'<A HREF= Option</A>'
);

Layer[5] = new LayerSpecs(459,24,120,
'<A HREF= Option</A>',
'<A HREF= Option</A>'
);

Layer[6] = new LayerSpecs(572,24,120,
'<A HREF= Option</A>',
'<A HREF= Option</A>'

);

////////////////////////////////////////////////////////////////

j = (Layer[0]) ? 0:1;

for(i=j; i<Layer.length; i++) {
if(document.all && No3) { document.write("<SPAN onMouseOver='clearTimeout(timer)' onMouseOut='Hide("+i+")' ID='L"+i+"' STYLE='position:absolute; visibility:hidden; background:"+background+"; top:"+Layer.top+"; left:"+Layer.left+";'><TABLE STYLE='border:solid "+menu_border+" "+border_color+"'>"+Layer.info+"</TABLE></SPAN>"); }
else if(document.layers && No3) { document.write("<LAYER onMouseOver='clearTimeout(timer)' onMouseOut='Hide("+i+")' ID='L"+i+"' POSITION=ABSOLUTE VISIBILITY=HIDDEN BGCOLOR='"+bgcolor+"' BACKGROUND='"+background+"' TOP="+Layer.top+" LEFT="+Layer.left+">"+Layer.info+"</LAYER>"); }
}

// -->

</SCRIPT>

<div align="left">
<TABLE border="0" cellpadding="0" cellspacing="0" WIDTH="100%" HEIGHT="3" bgcolor="#00009c">
<tr>
<td WIDTH="20%" HEIGHT="170" align="right">
<p align="center">

</p>
</td>
<td WIDTH="80%" HEIGHT="170">
<p align="center"><b><font face="Arial" color="#FFFFFF" size="5">Z-Poll
Online<br>
</font><font face="Arial" color="#FFFFFF" size="3">Laboratory Ordering and Reporting System</font></b>
</p>
<p align="center"><b><font face="Arial" color="#FFFFFF" size="5">Make a
selection from the menu above.</font></b></p>
<p>&nbsp;</td>
</tr>
</TABLE>

</div>
</FORM>
</BODY>
</HTML>
 
Sort by date Sort by votes
On IE the mouse over works, but in Firefox, when you hover over the link, the menu does not appear.
Click to expand...

That's because IE is smart enough to work in quirksmode and FF is not. You will need to use a valid doctype and clean up your code. With a valid doctype IE does not work either.

Hope that helps!

Clive
 
Upvote 0 Downvote
Well... where to start. There were so many errors in the code, it just was too much hassle to list them all... so instead, I've just cut out all the support for older browsers (who uses NN4 now?), and tidied up the code generally. It's not 100%, but it looks good in FF, NN, and IE, and will do with a small amount of tweaking for Opera:

Code: 
<html>
<head>
	<style type="text/css">
		body  {
			background: #00009C;
			font-size: 10px;
			font-color: navy;
		}
		body, td, tr, th {
			font-family: Tahoma, sans-serif;
		}
		a {
			color: #FFFFFF;
			font-weight: bold;
			text-decoration: none;
		}
		a:hover {
			text-decoration: underline;
		}
		a:visited {
			color: #FFFFFF;
		}
		td {
			font-size: 10px;
			font-color: #DAE722;
		}
		th {
			font-size: 10px;
			font-color: #FFFFFF;
		}
	</style>

	<script type="text/javascript">
	<!--
		function wldInitialisePage() {
			DocLoaded = 'done' ;
			Pressed = false ;
		}

		var timer;

		function Show() {
			if (timer) clearTimeout(timer);
			for (menu=0; menu<Layer.length; menu++) {
				if(Layer[menu]) document.getElementById('L'+menu).style.visibility = "hidden";
			}
			for (i=0; i<arguments.length; i++) {
				menu = arguments[i];
				document.getElementById('L'+menu).style.visibility = "visible";
			}
		}

		function Hide() {
			timer = setTimeout("Show()", 500);
		}
	//-->
	</script>
</head>
<body>

	<table border="1" cellpadding="0" cellspacing="0" width="750" height="17" bgcolor="#29A92D" bordercolordark="#FFFFFF" bordercolor="#000080" bordercolorlight="#C0C0C0">
		<tr>
			<td width="100" align="center"><a onmouseover="Show(1);" onmouseout="Hide(1);" href="[URL unfurl="true"]http://www.msn.com">Patient</a></td>[/URL]
			<td width="100" align="center"><a onmouseover="Show(2);" onmouseout="Hide(2);" href="[URL unfurl="true"]http://www.msn.com">Orders</a></td>[/URL]
			<td width="100" align="center"><a onmouseover="Show(3);" onmouseout="Hide(3);" href="[URL unfurl="true"]http://www.msn.com"">Requsition</a></td>[/URL]
			<td width="100" align="center"><a onmouseover="Show(4);" onmouseout="Hide(4);" href="[URL unfurl="true"]http://www.msn.com">Reporting</a></td>[/URL]
			<td width="100" align="center"><a onmouseover="Show(5);" onmouseout="Hide(5);" href="[URL unfurl="true"]http://www.msn.com">Catalog</a></td>[/URL]
			<td width="100" align="center"><a onmouseover="Show(6);" onmouseout="Hide(6);" href="[URL unfurl="true"]http://www.msn.com">Files</a></td>[/URL]
			<td width="100" align="center"><a href="[URL unfurl="true"]http://www.msn.com">Logout</a></b></span></td>[/URL]
		</tr>
	</table>

	<script type="text/javascript">
	<!--

        hovercolor   = '#CCCCCC';       // color name/code
        bgcolor      = '#999999';       // color name/code
        background   = '';                      // picture url
        menu_border  = '1px';
        border_color = 'white';
        arrow_pic    = 'C:/DATA/REPPLUS/rarrow.gif'; // url of arrow picture for submenus

		if (!background) {
			background = bgcolor;
		} else {
			background = 'url('+background+')';
		}

		function LayerSpecs(Left, Top, Width) {
			if(document.all) {
				Top+=7;
				Left+=2;
			}
			Width+=56;
			this.left  = Left;
			this.top   = Top;
			this.info  = "";
			T=0;
			for(i=3; i<arguments.length; i++) {
				this.info += '<tr><td width='+Width+' onmouseover="this.bgColor=\''+hovercolor+'\';" onmouseout="this.bgColor=\'\';">'+arguments[i]+'</td></tr>';
				T+=20;
			}
		}

		Layer = new Array();
		arrow = '<img src="'+arrow_pic+'" width="6" height="10" border="0" alt="" />';

		Layer[1] =      new LayerSpecs(30,24,120,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>'
		);

		Layer[2] =      new LayerSpecs(137,24,100,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>'
		);

		Layer[3] =      new LayerSpecs(240,24,120,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>'
		);

		Layer[4] =      new LayerSpecs(345,24,120,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.COM>Menu[/URL] Option</A>'
		);

		Layer[5] =      new LayerSpecs(459,24,120,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>'
		);

		Layer[6] =      new LayerSpecs(572,24,120,
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>',
		'<A HREF=[URL unfurl="true"]http://www.MSN.com>Menu[/URL] Option</A>'

		);

		j = (Layer[0]) ? 0:1;

		for(i=j; i<Layer.length; i++) {
			document.writeln('<span onmouseover="clearTimeout(timer);" onmouseout="Hide('+i+');" id="L'+i+'" STYLE="position:absolute; visibility:hidden; background:'+background+'; top:'+Layer[i].top+'; left:'+Layer[i].left+';">');
			document.writeln('<table style="border:solid '+menu_border+' '+border_color+'">'+Layer[i].info+'</table>');
			document.writeln('</span>');
		}

	//-->
	</script>

</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]
 
Upvote 0 Downvote
Thank you BilleRayPreachersSon....with your help I got it working.

Mike...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
124
trevil620
trevil620
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
131
rogerte
rogerte
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
179
xwb
xwb
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
227
MDGarcia
MDGarcia
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
82
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top