Intestazione fissa ed àncore

[essedi]

 Nel sito     http://www.essedi.altervista.org/menufisso/index.html

ho raccolto le informazioni acquisite su questo forum e su Answer sul modo di tenere fissi le sezioni Menu, Intestazione e Piè di Pagina di un sito costruito con EVO 9.
Funziona bene, tranne che con le àncore.

Nella pagina http://www.essedi.altervista.org/menufisso/header-e-menu--sopra-.html
 
ho inserito un'àncora (par1) prima del paragrafo “Come tenere fissi Header e Menu (sopra)”.

In fondo alla pagina ho inserito un collegamento all'ancora suddetta (href=”#par1”) ed un collegamento ad inizio pagina (href=”#”)

Il collegamento ad inizio pagina funziona come atteso, posizionando l'inizio del testo al di sotto dell'Intestazione.

Cliccando su “Torna ad inizio paragrafo”, invece, l'àncora viene posizionata in cima alla pagina del sito, con la conseguenza che il testo viene parzialmente nascosto dall'Intestazione e dal Menu.

Qualcuno sa indicarmi una soluzione?

 

[stesil]

Ho trovato questo: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors

ma, non penso che tu possa applicarlo pari pari alla struttura della pagina che hai creato. L'oggetto html è contenuto in un div alto 5px con overflow:hidden ... non so se funzionerà.

In alternativa prova ad inserire l'ancora direttamente nell'oggetto testo:

Codice:

Only registered users can see contents. Please click here to Register or Login.

[essedi]

Ho trovato questo: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors

ma, non penso che tu possa applicarlo pari pari alla struttura della pagina che hai creato. L'oggetto html è contenuto in un div alto 5px con overflow:hidden ... non so se funzionerà.

In alternativa prova ad inserire l'ancora direttamente nell'oggetto testo:

Codice:

Only registered users can see contents. Please click here to Register or Login.

 Grazie Stesil.
Avevo già provato la strada del padding-top per l'àncora, utilizzando una apposita classe (sdAncora). Fermandomi all'anteprima, ne avevo tratto la conclusione (errata) che non funzionasse.

Ora, a seguito della tua risposta, sono andato più a fondo ed ho scoperto che il metodo invece funziona con FF e Chrome, ma non con IE (il che spiega il mancato funzionamento in Anteprima).

Ho aggiornato il sito. Potete confermarmi quanto da me sperimentato?

In caso di conferma, qualcuno sa indicarmi una soluzione per IE? Non mi serve nel caso specifico, ma mi piacerebbe capire come fare.
 
 

[stesil]

Ciao,

non è una soluzione ma una prova ulteriore ... in attesa di idee migliori: http://stesil.altervista.org/evo9/ancore/index.html

In oggetto testo funziona quasi sempre. In oggetto html, (a pagina 1) come hai provato anche tu, non funziona.

Mi sono data questa spiegazione, ma non so quanto sia corretta. Perchè funzioni anche in IE l'ancora deve essere posizionata in modo che sia distante dal margine superiore del div che la contiene almeno tanto quanto il valore di padding-top.

[essedi]

Ciao,

non è una soluzione ma una prova ulteriore ... in attesa di idee migliori: http://stesil.altervista.org/evo9/ancore/index.html

In oggetto testo funziona quasi sempre. In oggetto html, (a pagina 1) come hai provato anche tu, non funziona.

Mi sono data questa spiegazione, ma non so quanto sia corretta. Perchè funzioni anche in IE l'ancora deve essere posizionata in modo che sia distante dal margine superiore del div che la contiene almeno tanto quanto il valore di padding-top.

La tua spiegazione coincide anche con la mia esperienza.

A seguito della tua prima risposta avevo effettuato anche la prova di inserire l'àncora nell'oggetto testo.

Nei miei testi sono presenti parti che, abilitando il codice HTML, sarebbero interpretate appunto come codice e non semplice testo.

Allora avevo pensato di inserire degli oggetti testo con HTML abilitato, contenenti solo le àncore, quindi molto corti.

L'esito era stato negativo, in perfetto accordo con la tua spiegazione.

Esisterà un altro sistema? Magari con codice js.

[stesil]

Sì con jQuery si riesce: http://stesil.altervista.org/evo9/ancore/pagina-2.html

L'ho scritto velocemente ... si potrà fare di meglio. Da verificare se funziona con tutti i browser. Con IE9 funziona.

[essedi]

Sì con jQuery si riesce: http://stesil.altervista.org/evo9/ancore/pagina-2.html

L'ho scritto velocemente ... si potrà fare di meglio. Da verificare se funziona con tutti i browser. Con IE9 funziona.

 Funziona, grazie.

Peccato che il codice debba intervenire sul collegamento e non sull'àncora. Questo comporta necessariamente l'utilizzo del tag <a> inserito in un oggetto HTML.

Di conseguenza il collegamento non può essere inserito direttamente su un testo o una immagine tramite la maschera di EVO 9, come da me spiegato in fondo a questa pagina.

http://www.essedi.altervista.org/_sito/ancore.html

 
Poi c'è una cosa che non ho capito. Tu calcoli l'offset tramite
   var id_ancora=$(this).attr('href');
   var h=$("a"+id_ancora+"").offset().top;

 
Per quel poco che conosco di js io avrei scritto
   var id_ancora=$(this).attr('href');
   var h=$(id_ancora).offset().top;

 
Fra l'altro sembra che funzioni anche il mio codice.
Quale è la differenza tra i due?

 
 

[stesil]

Peccato che il codice debba intervenire sul collegamento e non sull'àncora. Questo comporta necessariamente l'utilizzo del tag <a> inserito in un oggetto HTML.

Serve un evento per attivare il codice js e il click sul link corrispondente mi sembra l'unico evento utilizzabile, in questo caso. Ovviamente potrei sbagliarmi.

Di conseguenza il collegamento non può essere inserito direttamente su un testo o una immagine tramite la maschera di EVO 9, come da me spiegato in fondo a questa pagina.

http://www.essedi.altervista.org/_sito/ancore.html

Non è detto che non sia possibile. Se proprio si vuole utilizzare la funzione del programma, il link inserito in oggetto testo può essere circondato da un tag span con la classe "link_ancora" e il selettore jquery da utilizzare sarà: $('span.link_ancora a').click(function(){

Per il collegamento inserito su un'immagine, invece, si può utilizzare direttamente l'id della cella che la contiene come selettore jquery
$('#imCellStyle_26 a').click(function(){

Poi c'è una cosa che non ho capito. Tu calcoli l'offset tramite
   var id_ancora=$(this).attr('href');
   var h=$("a"+id_ancora+"").offset().top;

 
Per quel poco che conosco di js io avrei scritto
   var id_ancora=$(this).attr('href');
   var h=$(id_ancora).offset().top;

 
Fra l'altro sembra che funzioni anche il mio codice.
Quale è la differenza tra i due?

Nessuna. E' come per i selettori CSS: a#par0 (l'elemento <a> che ha come id par0); #par0 (l'elemento con id par0). Dato che in una pagina c'è o meglio ci dovrebbe essere un solo elemento con id par0 le due scritture sono equivalenti.

[essedi]

Peccato che il codice debba intervenire sul collegamento e non sull'àncora. Questo comporta necessariamente l'utilizzo del tag <a> inserito in un oggetto HTML.

Serve un evento per attivare il codice js e il click sul link corrispondente mi sembra l'unico evento utilizzabile, in questo caso. Ovviamente potrei sbagliarmi.

 Premesso che il tuo sistema mi sta più che bene e che il resto della discussione è un semplice pourparler, preferisco il metodo iniziale alle altre possibilità.
 

Di conseguenza il collegamento non può essere inserito direttamente su un testo o una immagine tramite la maschera di EVO 9, come da me spiegato in fondo a questa pagina.

http://www.essedi.altervista.org/_sito/ancore.html

Non è detto che non sia possibile. Se proprio si vuole utilizzare la funzione del programma, il link inserito in oggetto testo può essere circondato da un tag span con la classe "link_ancora" e il selettore jquery da utilizzare sarà: $('span.link_ancora a').click(function(){

 Anche un semplice <span> inserito in un oggetto testo presuppone l'abilitazione del codice HTML. Come detto in uno dei miei precedenti post, preferisco evitarlo.
 

Per il collegamento inserito su un'immagine, invece, si può utilizzare direttamente l'id della cella che la contiene come selettore jquery
$('#imCellStyle_26 a').click(function(){

 Sì, ma questo presuppone uno script per ogni immagine. Anche qui preferisco inserire l'immagine tramite un tag <a> con la classe richiamata nello script.
 

Poi c'è una cosa che non ho capito. Tu calcoli l'offset tramite
   var id_ancora=$(this).attr('href');
   var h=$("a"+id_ancora+"").offset().top;

 
Per quel poco che conosco di js io avrei scritto
   var id_ancora=$(this).attr('href');
   var h=$(id_ancora).offset().top;

 
Fra l'altro sembra che funzioni anche il mio codice.
Quale è la differenza tra i due?

Nessuna. E' come per i selettori CSS: a#par0 (l'elemento <a> che ha come id par0); #par0 (l'elemento con id par0). Dato che in una pagina c'è o meglio ci dovrebbe essere un solo elemento con id par0 le due scritture sono equivalenti.

 A questo sarei dovuto arrivarci da solo. Sarà la fretta, ma non avevo realizzato che il tuo selettore corrisponde a a#par0.
 
In conclusione ribadisco che preferisco la tua soluzione iniziale e ti ringrazio ancora una volta per l'aiuto.
 

[stesil]

Prego! 

E, solo nell'ottica di analizzare le varie possibilità, utili o inutili che siano, metto l'ultimo puntino sulla i 

 

Per il collegamento inserito su un'immagine, invece, si può utilizzare direttamente l'id della cella che la contiene come selettore jquery
$('#imCellStyle_26 a').click(function(){

 Sì, ma questo presuppone uno script per ogni immagine. Anche qui preferisco inserire l'immagine tramite un tag <a> con la classe richiamata nello script.

Basta un unico script, con i selettori separati da una virgola:
$('#imCellStyle_26 a,#imCellStyle_27 a, #imCellStyle_28 a').click(function(){
var id_ancora=$(this).attr('href');

$(this) corrisponde all'elemento che ha attivato l'evento.

[essedi]

Prego! 

E, solo nell'ottica di analizzare le varie possibilità, utili o inutili che siano, metto l'ultimo puntino sulla i 

 

Per il collegamento inserito su un'immagine, invece, si può utilizzare direttamente l'id della cella che la contiene come selettore jquery
$('#imCellStyle_26 a').click(function(){

 Sì, ma questo presuppone uno script per ogni immagine. Anche qui preferisco inserire l'immagine tramite un tag <a> con la classe richiamata nello script.

Basta un unico script, con i selettori separati da una virgola:
$('#imCellStyle_26 a,#imCellStyle_27 a, #imCellStyle_28 a').click(function(){
var id_ancora=$(this).attr('href');

$(this) corrisponde all'elemento che ha attivato l'evento.

Per me certo non sono discussioni inutili. Ho imparato un'altra cosa.