problema con firefox

**M@nu** · 24-10-2005, 18:23

Ciao a tutti.
Ho uno script che non riesco a far funzionare con firefox.
Il funzionamento della cosa dovrebbe essere simile a quello di una dropdownlist.

Il problema è che nasconde sempre il div, sembra come che firefox faccia l'onmouseout come se fosse un onmouseover!!

Ho fatto una sere di tentativi: addEventListener, document.layers, gira di qua... gira di la.... tutti vani naturalmente. Devo dire comunque che non ho grande conoscenza del javascript.

Di seguito vi posto il codice di tutta la pagina.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>prova di menu</TITLE>
<style type="text/css">
div.stilediv {
	display: none;
	position:absolute;
	color: white;
	width: 190px;
	overflow: auto;
	background: #EEEEEE;
	border: 1px solid #555555;
	z-index: 99;
	padding: 3px;
	margin-top: -1px;
}
a.menu{
	background: #CCCCCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 150px;
	height: 20px;
	margin: 0;
	padding: 0 0 0 5px;
	line-height: 20px;
	display: block;
	cursor: hand;
}
</style>
<SCRIPT language="javascript" type="text/javascript">
//VISUALIZZA E NASCONDI LAYER UC_DDL_PRODOTTI
var a=1;
function flip(d){if(a == 1) Show(d); else Hide(d);}
function Show(d)
{
	var obj
	if(d=='ddl1')obj=document.all('ddl1');
	if(d=='ddl2')obj=document.all('ddl2');
	if(d=='ddl3')obj=document.all('ddl3');
	if(d=='ddl4')obj=document.all('ddl4');
	obj.style.display="block";
	obj.attachEvent("onmouseover", function(){document.all(d).style.display = "block";});
	a=0;}
function Hide(d){
	document.getElementById(d).style.display="none";
	document.getElementById(d).attachEvent("onmouseout", function(){document.all(d).style.display = "none";});
	a=1;}
</SCRIPT>

</HEAD>
<BODY>
	<A class="menu" onclick="flip('ddl1')" onmouseout="Hide('ddl1')">menu 1</A>
		<DIV id="ddl1" class="stilediv" onmouseout="Hide('ddl1')">
		<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
			<TR>
				<TD>item 1</TD></TR>
			<TR>
				<TD>item 2</TD></TR>
		</TABLE>
		</DIV>

	


	<A class="menu" onclick="flip('ddl2')" onmouseout="Hide('ddl2')">menu 2</A>
		<DIV id="ddl2" class="stilediv" onmouseout="Hide('ddl2')">
			<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
				<TR>
					<TD>item 1</TD></TR>
				<TR>
					<TD>item 2</TD></TR>
				<TR>
					<TD>item 3</TD></TR>
				<TR>
					<TD>item 4</TD></TR>
			</TABLE>
		</DIV>

	


	<A class="menu" onclick="flip('ddl3')" onmouseout="Hide('ddl3')">menu 3</A>
		<DIV id="ddl3" class="stilediv" onmouseout="Hide('ddl3')">
			<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
				<TR>
					<TD>item 1</TD></TR>
				<TR>
					<TD>item 2</TD></TR>
				<TR>
					<TD>item 3</TD></TR>
				<TR>
					<TD>item 4</TD></TR>
				<TR>
					<TD>item 5</TD></TR>
				<TR>
					<TD>item 6</TD></TR>
				<TR>
					<TD>item 7</TD></TR>
				<TR>
					<TD>item 8</TD></TR>
			</TABLE>
		</DIV>

	

	<A class="menu" onclick="flip('ddl4')" onmouseout="Hide('ddl4')">menu 4</A>
		<DIV id="ddl4" class="stilediv" onmouseout="Hide('ddl4')">
			<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
				<TR>
					<TD>item 1</TD></TR>
				<TR>
					<TD>item 2</TD></TR>
				<TR>
					<TD>item 3</TD></TR>
			</TABLE>
		</DIV>
	</BODY>
</HTML>

Grazie din d'ora, Manuela

**fcaldera** · 24-10-2005, 18:40

document.all funziona su IE e su Opera... Sui browser W3C compliant come Firefox non puoi usarlo.

Ad esempio, dove scrivi

codice:

...
	if(d=='ddl1')obj=document.all('ddl1');
	if(d=='ddl2')obj=document.all('ddl2');
	if(d=='ddl3')obj=document.all('ddl3');
	if(d=='ddl4')obj=document.all('ddl4');
...

sostituisci con

codice:

...
	if(d=='ddl1')obj=document.getElementById('ddl1');
	if(d=='ddl2')obj=document.getElementById('ddl2');
	if(d=='ddl3')obj=document.getElementById('ddl3');
	if(d=='ddl4')obj=document.getElementById('ddl4');
...

sotituisci anche nei restanti punti del codice dove appare document.all con document.getElementById (occhio a maiuscole e minuscole)

**M@nu** · 25-10-2005, 09:18

Non funziona ancora... cmq buona a sapersi questa cosa

È come se sul div che appare facesse l'onmouseover invece che l'onmouseout e quindi la nasconde appena ci vado spora con il mouse invece che quando ci esco.

**M@nu** · 25-10-2005, 13:22

uuhh!!!! caspita!
ho visto la risposta che hai dato ad un'altro utente sulla consolle javascript di firefox! che illuminazione!!

così ho capito che il problema era attachEvent e ho modificato aggiungendo la differenziazione dei browser.

codice:

var a=1;
function flip(d){if(a == 1) Show(d); else Hide(d);}
function Show(d)
{
	var obj	
	if(d=='ddl1')obj=document.getElementById('ddl1');
	if(d=='ddl2')obj=document.getElementById('ddl2');
	if(d=='ddl3')obj=document.getElementById('ddl3');
	if(d=='ddl4')obj=document.getElementById('ddl4');		
	obj.style.display="block";
	if(window.addEventListener){ // Mozilla, Netscape, Firefox
		} else { // IE
		obj.attachEvent("onmouseover", function(){obj.style.display = "block";});
	}
	a=0;}
function Hide(d){
	document.getElementById(d).style.display="none";
	if(window.addEventListener) { // Mozilla, Netscape, Firefox
		document.getElementById(d).addEventListener ('mouseout ', function(){document.getElementById(d).style.display = "none";}, false);
	} else { // IE
		document.getElementById(d).attachEvent("onmouseout", function(){document.getElementById(d).style.display = "none";});
	}
	a=1;}

Grazie!! grazie!!

Manuela

Discussione: problema con firefox

Strumenti discussione

Ricerca discussione

Visualizza

problema con firefox

Permessi di invio