Comandare i DIV tramite script

**kronoh** · 09-09-2005, 15:32

Salve a tutti, sono alle prime armi con gli script dopo un po di tempo di HTML statico, mi sono deciso a far ricominciare a girare le rotelle del cervello...
Volevo sapere se qualcuno può aiutarmi ; in pratica ho bisogno di capire la procedura di unione tra i div e i comportamenti in javascript, ovvero capire come cambiare lo stato da hidden a visible di un livello collegandolo ad un azione del mouse (onpress); non ho trovato un granchè se qualcuno può darmi una mano...
Grazie anticipatamente
Davide

**fcaldera** · 09-09-2005, 16:01

Il procedimento è sempre uguale ed è più o meno questo

1) i div possono essere oggetto di azioni Js solo dopo che questi sono stati caricati, quindi all'evento che desideri (onclick, onouseover...) richiami una funzione che si trova nell'header.

2) associa un id al tuo div, i.e.

codice:

<div id="mioid">
  Sono proprio un bel div!
</div>

Associ l'evento a un link

codice:

<a href="#" onclick="handle_div('mioid')">
Mostra/nascondi il div
</a>
</div>

e come detto prima scrivi la funzione sull'header.
Per creare un riferimento ad un elemento dato il suo
id si usa il metodo .getElementById()
(Attenzione a maiuscole e minuscole !!!!!)

codice:

<script type="text/javascript">
function handle_div(id_div_to_handle) {
  ref = document.getElementById(id_div_to_handle);
  
  if (ref.style.display  == 'none') {
    ref.style.display = 'block';
  }
  else {
    ref.style.display = 'none';
  }
}
</script>

La funzione crea un riferimento al div, dopodichè controllo
la proprietà display (che fa parte dello style). Se questo è invisibile lo mostra altrimenti lo nasconde.

todo claro??

**kronoh** · 10-09-2005, 10:22

Proprio quello che volevo!!! GRAZIE!.
Alcune curiosità
Quando in una stessa parte di una pagina sovrappongo più div della stessa grandezza che devono essere resi visivili tramite questa funzione, i div devono essere nidificati, o aperti e chiusi singolarmente cosi?
<div>Primo Div</div>
<div>Secondo Div</div>
<div>Terzo Div</div>
<div>Quarto Div</div>
<div>Quinto Div</div>

o così?

<div>Primo Div
<div>Secondo Div
<div>Terzo Div
<div>Quarto Div
<div>Quinto Div</div></div></div></div></div>
tramite z-index, conda in visualizzazione il più alto o visto che con lo script cambio lo stato da hidden a visible non è importante?
Grazie anticipatamente
Davide

**kronoh** · 10-09-2005, 10:47

un altro problema, quando lo scipt parte, parte con il div visibile, con lo script si nasconde, vorrei partire con il div nascosto, ma dando lo style=" visibility: Hidden" al div non funziona, ho provato a cambiare lo script da:
if (ref.style.display == 'none') {
a
if (ref.style.display == 'hidden') {
e succede che il div non ricompare più dopo la prima volta che premo sul link.
Come posso modificarlo?
Un ultima cosa: per evitare che il link una volta che il div non è più visibile prenda la posizione del div, cioè si sposta, do al div la posizione assoluta con le coordinate?
Grazie Anticipatamente
Davide

**kronoh** · 10-09-2005, 11:12

allora, per il posizionamento ho risolto, il problema adesso è che ho bisogno di uno script diverso e ora ti spiego il perchè:

<html>

<head>
<title>Div comandati</title>
<script type="text/javascript">
function handle_div(id_div_to_handle) {
ref = document.getElementById(id_div_to_handle);

if (ref.style.display == 'none') {
ref.style.display = 'block';
}
else {
ref.style.display = 'none';
}
}
</script>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

</p>
<div style="width:187px; height:40px; position:absolute; left:443px; top:48px; z-index:1; visibility:visible;" id="mioid">
Sono proprio un bel div!
</div>
<div style="width:187px; height:40px; position:absolute; left:443px; top:48px; z-index:1; visibility:visible;" id="mioid2">
div 2!
</div>
<div style="width:187px; height:40px; position:absolute; left:443px; top:47px; z-index:1; visibility:visible;" id="mioid3">
div 3!
</div>

<div style="position:absolute; z-index:1; left: 200 px;">
<a href="#" onclick="handle_div('mioid')"></div>
Mostra/nascondi il div
</a>
<div>
<div style="position:absolute; z-index:1; left: 200 px;">
<a href="#" onclick="handle_div('mioid2')"></div>
Mostra/nascondi il div
</a>
<div>
<div style="position:absolute; z-index:1; left: 200 px;">
<a href="#" onclick="handle_div('mioid3')"></div>
Mostra/nascondi il div
</a>
<div>
</body>

</html>
se copi questa pagina capirai qual'è il problema, il problema, oltre al fatto che il div visibile all'apertura della pagina dovrebbe essere uno solo al massimo (ma preferirei partire proprio senza nessuna visualizzazione), sta nel fatto che se clicco sul link per rendere visibile un div, e non riclicco per farlo scomparire, e passo a un altro link, questo si sovrappone e quello precedente rimane visibile, ci vorrebbe uno script che disabiliti la visibilità degli altri div ogni volta che uno è visibile, forse bisognerebbe creare un array?
Grazie anticipatamente
Davide

**Xinod** · 10-09-2005, 12:04

perche' setti la visibility per poi cambiare il display?
cmq, l' array puoi anche non crearlo, se usi un numero crescente nel nome dei div, x es.

codice:

<script type="text/javascript">
function handle_div(n) {
	var totalDivs=3;
	for(var k=0;k<totalDivs;k++){
		var ref = document.getElementById('mioid'+k);
		if(k!=n) ref.style.display='none';
		else ref.style.display=(ref.style.display=='none')?'block':'none';
	}
	return false
}
</script>

dove i div sono

codice:

<div style="width:187px; height:40px; position:absolute; left:443px; top:48px; z-index:1; display:none;" id="mioid0">
Sono proprio un bel div!
</div>
<div style="width:187px; height:40px; position:absolute; left:443px; top:48px; z-index:1; display:none;" id="mioid1">
div 2!
</div>
<div style="width:187px; height:40px; position:absolute; left:443px; top:47px; z-index:1; display:none;" id="mioid2">
div 3!
</div>

e i link

codice:

<a href="#" onclick="return handle_div(0)">
Mostra/nascondi il div
</a>
<a href="#" onclick="return handle_div(1)">
Mostra/nascondi il div
</a>
<a href="#" onclick="return handle_div(2)">
Mostra/nascondi il div
</a>

ciao

**kronoh** · 10-09-2005, 13:18

perfetto, funziona cosi come me lo ero sognato!!!!!
Sei un grande!!! (potrebbe diventare una pillola?)
Alla prossima.
Davide

**kronoh** · 10-09-2005, 13:32

Un ultima cosa: se volessi fare in modo che gli eventi vengano gestiti tramite onMouseOver e onMousOut, cioè con onMouseOver si attiva il livello (questo l'ho già provato), e appena esco fuori dal link scompaia di nuovo, a cosa devo collegare onMouseout? devo richiamare un'altro script o modificare quello precedente?
Grazie anticipatamente

**kronoh** · 10-09-2005, 13:42

ho risolto creando questo altro script e collegandolo all'evento onMouseOut:

<script type="text/javascript">
function handle2_div(n) {
var totalDivs=3;
for(var k=0;k<totalDivs;k++){
var ref = document.getElementById('mioid'+k);
ref.style.display='none'; }
}
</script>
Credi che vada bene o c'è una soluzione meno "spartana"?
Grazie anticipatamente
Davide

**fcaldera** · 10-09-2005, 13:54

così va più che bene.
ciao

Discussione: Comandare i DIV tramite script

Strumenti discussione

Ricerca discussione

Visualizza

Comandare i DIV tramite script

Permessi di invio