[Javascript] Visibilità 'id'

**Gil Mour** · 16-02-2005, 00:28

Ho fatto un semplice script che permette l'apertura di un menu come segue:
1.imposta la visibility a true
2.lo espande in altezza e larghezza
La funzione dovrebbe prendere in input l'oggetto da elaborare:il problema è che non riesco a passarlo come parametro.

questa è la funzione

codice:

function apri (menu) {
	var width = parseInt(sottoMenuLogin.style.width);
	var height = parseInt(sottoMenuLogin.style.height);
	if (width>100) return;
	width += 10;
	height += 10;
	sottoMenuLogin.style.width = width;
	sottoMenuLogin.style.height = height;
	setTimeout('apri(sottoMenuLogin)',2);
}

questo è l'html che invoca il metodo

codice:

<tr> 
    <td bgcolor="#FFFFFF"
	onMouseOver="rolloverMenuItem(this)"
	onMouseOut="rolloutMenuItem(this)"
	onClick="clickMenuItem(sottoMenuLogin)"><div align="center">login</div></td>
  </tr>

questo è il <div> che rappresenta il menu

codice:

<div id="sottoMenuLogin" style="height:0px;width:0px;"> 
  <table width="100%" border="0" bgcolor="#FFFFFF" cellspacing="1" style="color:white">
	<tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
  </table>
</div>

il codice che ho postato è funzionante perchè, come avrete visto, nella funzione uso un riferimento assoluto all'oggetto in questione e ignoro il parametro 'menu'. Se invece sostituisco al riferimento assoluto il parametro non funziona piu' niente, come se non vedesse l'oggetto 'sottoMenuLogin'. Come mai?

Domanda numero due: perche l'espansione del div avviene correttamente in larghezza mentre in altezza alla prima iterazione si espande fino alle massime dimensioni?

Per chi volesse provare il tutto posto l'intero codice della pagina cosi fate prima senza fare duemila copia incolla ^^

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var coloreRolloverMenuItem = "#336666";
var coloreRolloutMenuItem = "#003366";
function apri (menu) {
	var width = parseInt(sottoMenuLogin.style.width);
	var height = parseInt(sottoMenuLogin.style.height);
	if (width>100) return;
	width += 10;
	height += 10;
	sottoMenuLogin.style.width = width;
	sottoMenuLogin.style.height = height;
	setTimeout('apri(sottoMenuLogin)',2);
}

function rolloverMenuItem(menuItem) {
	menuItem.style.color = coloreRolloverMenuItem;		
	menuItem.style.cursor = "hand";
}

function rolloutMenuItem(menuItem) {
	menuItem.style.color = coloreRolloutMenuItem;
}

function clickMenuItem(menuItem) {
	menuItem.style.visibility = "visible";
	apri(menuItem);
}

</script>
<style type="text/css" media="screen">
#menu {font-family:courier new;text-size:10pt;color:#003366;}

#sottoMenuLogin {
	visibility:hidden;
	position:absolute;
	left:100px;
	top:20px;
	
	color:#FFFFFF;
}
</style>
</head>

<body>
<table id="menu" width="150" border="0" cellspacing="1" bgcolor="#003366">
  <tr> 
    <td bgcolor="#FFFFFF"
	onMouseOver="rolloverMenuItem(this)"
	onMouseOut="rolloutMenuItem(this)"
	onClick="clickMenuItem(sottoMenuLogin)"><div align="center">login</div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFFF"><div align="center">registrazione</div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFFF"><div align="center">vedi</div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFFF"><div align="center">fai</div></td>
  </tr>
</table>
<div id="sottoMenuLogin" style="height:0px;width:0px;"> 
  <table width="100%" border="0" bgcolor="#FFFFFF" cellspacing="1" style="color:white">
	<tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
    <tr>
      <td bgcolor="#003366">a</td>
    </tr>
  </table>
</div>
</body>
</html>

**Xinod** · 16-02-2005, 02:32

Originariamente inviato da Gil Mour
Se invece sostituisco al riferimento assoluto il parametro non funziona piu' niente, come se non vedesse l'oggetto 'sottoMenuLogin'. Come mai?

passa una stringa
onClick="clickMenuItem('sottoMenuLogin')">
e possibilmente accedi all' oggetto con opportuno DOM moderno
document.getElementById(menu).etc.etc

Domanda numero due: perche l'espansione del div avviene correttamente in larghezza mentre in altezza alla prima iterazione si espande fino alle massime dimensioni?

specifica nel css di sottoMenuLogin
overflow:hidden

ciao

**COMANDANTE SPACE** · 16-02-2005, 12:22

Originariamente inviato da Xinod

Domanda numero due: perche l'espansione del div avviene correttamente in larghezza mentre in altezza alla prima iterazione si espande fino alle massime dimensioni?

specifica nel css di sottoMenuLogin
overflow:hidden

ciao

questo è dovuto al fatto che Internet Explorer è incapace di settare correttamente la proprietà height,in pratica non rispetta correttamente lo standard CSS2,giusto?

Discussione: [Javascript] Visibilità 'id'

Strumenti discussione

Ricerca discussione

Visualizza

[Javascript] Visibilità 'id'

Re: [Javascript] Visibilità 'id'

Re: Re: [Javascript] Visibilità 'id'

Permessi di invio