Div a scomparsa SENZA spostare la pagina!

ciao a tutti.
uso da un pò di tempo questo script per nascondere/mostrare un tag div:

<script type="text/javascript">
<!--
function scambio(id){
	if (document.getElementById){
		if(document.getElementById(id).style.display == 'none'){
			document.getElementById(id).style.display = 'block';
			} else {
			document.getElementById(id).style.display = 'none';
		}
	}
}
-->
</script>

e come link per richiamarlo:

<a href="#" onclick="scambio('id_div')">

il problema è che ogni volta che clicco sul link la pagina è come se si refreshasse e riappare dall'inizio senza mantenere la posizione attuale al momento del click.

come posso fare?

grazie.

Accade perchè l'indirizzo del link è un'ancora, infatti le ancore sono identificate con #nomeancora.
Non trovando nessuna ancora con quel nome (infatti non c'è nessun nome) la pagina scrolla a coordinate 0,0.

Modifica così:

<a href="javascript:scambio('id_div')">


Ciaooo!!!11

grazie ora va che è un piacere :)

[dreadnaut]

si, però adesso è male - non si dovrebbe usare javascript: nell'href. E la soluzione corretta in effetti è molto più facile Se il codice javascript in onclick restituisce false, la redirezione dell'href non viene effettuata.

Quindi puoi usare una cosa del genere:

<a href="#" onclick="scambio('id_div'); return false;">

o return scambio(...), e scambio ritorna false :-)

edit: invece di #, volendo essere proprio tignosi, pignoli e accessibili, ci vorrebbe un link ad una pagina, che fornisca a chi non ha javascript [attivo] lo stesso risultato di scambio().

edit2: uh, io l'ho scoperto pochi giorni fa', ma per le ancora adesso non serve piu' usare name= bla bla, ma basta l'attributo id. Mi ha reso molto felice

si, però adesso è male ...

Quindi puoi usare una cosa del genere...

edit: ...

edit2: ...

Ma tu non c'hai niente da fare?!?




Ciaoo!!!!!!!!

[dreadnaut]

whops, non lo faccio più, prometto !

io però non ho capito piu un cavolo!

[funcool]

Al posto di:

<a href="#" onclick="scambio('id_div')">

Metti:

<a href="#" onclick="scambio('id_div'); return false;">

che infatti mi sa che fosse la configurazione originale trovata secoli fa e poi perduta causa molteplici copia/incolla...
ma con il return false si risolve il problema dello scrolling?

[funcool]

ma con il return false si risolve il problema dello scrolling?

Sì, perché non esegue quello che c'è scritto in href.

OK, grazie mille.
vado a rimodificare tutti i file allora ^^

[heracleum]

Mia personale preferenza (perché anche più compatta come soluzione) è la variante senza un return false esplicito, ovvero:

<a href="#" onclick="return scambio('id_div');">

Che però ovviamente richiede che alla fine della function scambio, l'ultima riga sia "return false;"
riscrivendo tutta la fuction (anche ottimizzandola un po' ) ecco il codice adatto:

<script type="text/javascript">
<!-- 
function scambio(id){ 
 if (document.getElementById){
  var elem = document.getElementById(id);
  elem.style.display = (elem.style.display == 'none')? 'block' : 'none';
 }
 return false;
} 
-->
</script>

Come vedi, oltre a ritornare false alla fine, evita di fare più volte il getElementById facendolo una volta sola, meglio no?
ciao

non so dirti se sia meglio o peggio, di javascript non ci ho mai capito una mazza :)

cmq grazie a tutti per le risposte esaustive!

Metti :
<a href="javascript:void(0)" onclick="scambio('id_div')">

Ecco la differernza :
È un modo per scrivere un link "vuoto" e molto spesso equivale a <a href="#">, con la differenza che il # fa puntare il browser in alto nella pagina. Infatti se ci troviamo in una pagina molto lunga vedremo che dopo il click su <a href="#"> il browser punta in alto.

La sintassi void(0) invece non fa nulla e non produce alcun effetto.

Spesso è un modo per individuare un link che non punta a una pagina particolare, ma che per qualche motivo dobbiamo utilizzare come <a>.

(preso da un sito web)

:)

che si ottiene con void(0) ??

[dreadnaut]

Metti :
<a href="javascript:void(0)" onclick="scambio('id_div')">

uff... no, niente javascript nel campo href

La sintassi void(0) invece non fa nulla e non produce alcun effetto.

ma come scritto sopra meglio non mettere href=javascript:blablabla, meglio usi il return false, ciao!

[heracleum]

il javascript:void(0) nell'href mi è sempre sembrata la soluzione peggiore sinceramente

poi è ovvio che quando sopra suggerivo:
<a href="#" onclick="return scambio('id_div');">

è sempre un milione di volte più corretto (per l'accessibilità a cui si è sempre più sensibili oggi) mettere nell'href un indirizzo che -pur facendo una richiesta al server- crei lo stesso effetto che genera il javascript, come giustamente suggerito da dreadnut. Per esempio in questo caso, se lo script è "index.php" che di default mostra tutti i div nascosti, dovrebbe accettare in querystring un parametro che indichi quale div sia mostrato, per es:
<a href="index.php?id_div=1" onclick="return scambio('id_div');">

così è la situazione migliore per eccellenza... buona oltre che per l'accessibilità, per chi è maniaco di trascinamenti di link in altri tab. Per fare un esempio che avete sotto agli occhi se cliccate in testa al forum sulla voce "Cerca" c'è registrato un evento javascript che fa aprire la tendina... ma se guardate il codice c'è un semplice href impostato, questo viene sovrascritto per priorità dall'evento js ma ad ogni modo, per chi non avesse javascript attivo sarebbe un semplice link alla pagina di ricerca avanzata, stessa cosa se trascinate il link Cerca in un altro tab (firefox / ie7).

Ma c'è anche da dire che -da quanto mi sembra di capire- stiamo fin troppo filosofeggiando rispetto alle semplici richieste di lsdforum ;)

beh si, forse stiamo raggiungendo un livello eccessivamente approfondito per uno script molto semplice il cui scopo è dare un tocco un pò più dinamico/fighetto ad una pagina.

quando metto online il sito vi sfiderò a trovare il luogo dove è stato usato! :)