[CSS] Le ancore non funzionano con display:none

[karletto]

Salve a tutti,
è il mio primo post, per cui colgo l'occasione per salutare tutto il forum.
Passo al mio problema:
ho creato delle pagine asp che, tramite funzioni javascript, sono organizzate in schedari, e il contenuto cambia a seconda della linguetta cliccata. Il contenuto di tutte le schede viene caricato interamente quando si apre la pagina, ma viene mostrato solo quello della linguetta attiva. Il tutto viene gestito tramite display:block e display:none dinamicamente in javascript.
Ora la questione è questa:
poiché all'inizio devo nascondere il tutto contenuto tramite display:none (in un <form style="display:none">), le parti di codice HTML che contengono delle ancore, non funzionano!
Mentre provando a caricare il contenuto dentro <form> con attributo style="display:block", le ancore tornano a funzionare normalmente.
Attendo un aiuto! Grazie,
Karl

P.S.: Mi sono accorto che non ho scpecificato in cosa non funzionanole ancore: cliccando su qualsiasi link a una di esse, si viene riportati sempre al top della pagina, e non nella posizione giusta dell'ancora.

[Mich_]

Non riesco a capire se la domanda si riferisce a XHTML o a JS.
E non capisco quali ancore non funzionano.

Ma fammi indovinare:
In una posizione fuori dai vari <div> controllati dalle alette (tab) tu hai dei link, che rimandano ad ancore contenute nei <div> interni a tali <div>; tu vorresti che quando clicchi su una di tali link, si aprisse anche il tab corrispondente?

Allora e` un problema di JS: devi scrivere il link cosi:
clicca

Aspetto conferma prima di spostarti.

[karletto]

Non proprio... ho qualcosa del genere:

<form style="display:none" id="form1">
 contenuto1 
</form>
<form style="display:none" id="form2">
 contenuto2 
</form>

...

<form style="display:none" id="formN">
 contenutoN 
</form>

Cliccando su una linguetta "X" il javascript fa

formX.style.display="block";

mentre tutti gli altri a "none".

Il problema è che in questo modo, quando contenutoX contiene delle ancore, queste non funzionano bene, ma rimandano sempre al top della pagina.
Se invece nei form metto style="display:block" le ancore funzionano perfettamente.

Ho messo la discussione qui perchè il problema è su display:none.
Karl

[Mich_]

formX.style.display="block";

Anzitutto ti consiglio di testare sempre con un browser serio, non con IE. Quell'istruzione si scrive:

document.getEementById('formX').style.display="block";

Poi ti faccio ancora domande:
A proposito dell'ancora che dici che non funziona: il link sta dentro il tab e punta ad un oggetto dentro il tab, o punta ad un oggeto fuori dal tab?
Hai provato a fare i tab tramite dei <div>, senza usare direttamente i <form> ? Perche` in qualche browser potresti avere problemi.

Nota: per ancora intendo:
<a name="qualcosa"> </a>

per link intendo:
link

[karletto]

Ok, passo alle risposte...

Originariamente inviato da Mich_
Anzitutto ti consiglio di testare sempre con un browser serio, non con IE. Quell'istruzione si scrive:

document.getEementById('formX').style.display="block";

Ho testato anche con Firefox 1.0.7 e la musica è la stessa.

l'istruzione js è come dici tu, qui l'ho scritta così per brevità.

Poi ti faccio ancora domande:
A proposito dell'ancora che dici che non funziona: il link sta dentro il tab e punta ad un oggetto dentro il tab, o punta ad un oggeto fuori dal tab?

Dove ho scritto "ContenutoX" in realtà c'è del codice HTML, ed ogni ancora, dove c'è, punta all'interno dello stesso contenutoX; in poche parole non si punta da un form all'altro.

Hai provato a fare i tab tramite dei <div>, senza usare direttamente i <form> ? Perche` in qualche browser potresti avere problemi.

Ok, proverò. Anche se ho paura che i DIV influiscano sulla struttura

Nota: per ancora intendo:
<a name="qualcosa"> </a>

per link intendo:
link

Si esatto.

Cmq grazie mille per le risposte. Proverò coi DIV e ti farò sapere.
Karl

[pierofix]

Non credo convenga nascondere le schede non attive tramite CSS: meglio farlo con javascript.

A parte essere una migliore soluzione in termini di accessibilità, se non erro le porzioni di contenuto che hanno 'display:none' specificato tramite CSS non vengono proprio prese in considerazione.

[karletto]

Originariamente inviato da pierofix
Non credo convenga nascondere le schede non attive tramite CSS: meglio farlo con javascript.

A parte essere una migliore soluzione in termini di accessibilità, se non erro le porzioni di contenuto che hanno 'display:none' specificato tramite CSS non vengono proprio prese in considerazione.

Infatti, come ho già scritto, la proprietà la imposto e la cambio sempre tramite js.

[pierofix]

Originariamente inviato da karletto

<form style="display:none" id="form1">
 contenuto1 
</form>

:master:

[karletto]

Originariamente inviato da pierofix
:master:

Ah sorry!
Quindi se ho capito bene mi converrebbe fare qualcosa tipo:

<form id="form1">
contenuto1
</form>
<script language="javascript"> document.getEementById('form1').style.display="non e"; </script>


al momento del caricamento della pagina, giusto?

Proverò anche questo.
Grazie!

Karl

[karletto]

Ok raga, problema risolto!

Alla fine non era questione di CSS, nè di HTML, nè di Javascript... In pratica non mi ero accorto che un pezzo di codice ASP creava un duplicato nascosto, a inizio pagina, dei vari contenuto1, contenuto2, ecc... e con esso anche i duplicati delle ancore!
Per questo cliccando su una qualsiasi ancora il browser mi portava su, perchè trovava un'altra ancora con lo stesso nome, ma posizionata prima!

Mi scuso per l'eventuale tempo che vi ho fatto perdere... Io ci ho sbattuto la testa per giorni, ma alla fine ho imparato molto. E' ciò che auguro a tutti: imparare dai propri errori (e da quelli degli altri!)

Un saluto, e al prossimo post!
Karl