Àncore nella pagina: dubbi e domande 
Autore: Giuseppe Guida
Visite 1045,
Followers 5,
Condiviso 0
Ciao, è tutto spiegato nel video. La soluzione per far funzionare correttamente le ancore c'è, come si evince dal video, ma non deve essere una forzatura, le ancore dovrebbero funzionare a prescindere da tutto il resto, grazie.
LINK del VIDEO: https://youtu.be/KAMDRsvRwW0
Postato il
... mi pare strano; ... forse queste Ancore hanno preso un qualche valore non richiesto...
... vedi se riesci a produrre il LINK una semplice prova online con tali caratteristiche...
... intanto per un test locale rapido di confronto puoi provare ad usare per l'Ancoraggio l'ID di una tabella invece del punto di Ancoraggio...
.
ciao
.
Comportamento curioso, e grazie per la segnalazione. Eventualmente hai provato a inserire con del CSS l'altezza minima?
il "problema" è generato dall'oggetto accordion che ha due dimensioni in altezza, una da chiuso e uno da aperto... nel momento in cui clicchi lui si chiude , ma il posizionamento viene fatto come se lui fosse ancora aperto, perchè così era quando hai cliccato sul link...
mettendogli di fianco un'oggetto della dimensione dell'accordion da aperto/sviluppato , viene calcolato giusto il posizionamento perchè è come se l'accordion rimanesse aperto...
Autore
Ciao Claudio... tutto molto chiaro e credo proprio che tu abbia centrato il problema.
Attendo risposta ufficiale dallo staff per capire se ci sono speranze di veder funzionare il tutto in modo regolare.
Grazie
Buongiorno Giuseppe
Confermo ciò che ha indicato Claudio che è assolutamente sensato
Purtroppo in questi casi, non c'è davvero molto che si può fare. Le ancora sono un sistema completamente integrato nei browser che le gestiscono in autonomia. Se un sito sfrutta sistemi che ne possono variare l'altezza, purtroppo questa è una cosa che può capire
Attualmente, temo di non poter dare alcuna indicazione utile per migliorare la questione se non di evitare ancore in quella pagina
Resto a disposizione
Stefano
Ciao Giuseppe, in alternativa per non lasciare uno spazio vuoto accanto all'oggetto accordition text e faq, l'ancora invece di "ancorarla" sull'oggetto immagine (della regione), puoi aggiungere un oggetto simple separator (con 10 / 20px di spazio) sopra ad ogni oggetto immagine, inserire sul simple separator l'ancora di ogni singola regione.
Autore
Ciao. Ok Stefano, immaginavo. Grazie
Francesco, metto una mappa dell'Italia a destra, mi invento qualcosa. Bisogna peró capire cosa succede poi alle soluzioni responsive quando i contenuti si verticalizzano e la mappa (o oggetto in generale) che da desktop è sulla destra finisce sotto all'accordion. Funzionerà da responsive? Boh? Poi provo anche come hai detto tu. Grazie
... per chi leggesse qui, e se ne fosse interessato, e se ancora non lo sapesse, ...ci sono anche mie vecchie/note, semplici e valide soluzioni, generalizzate, alla portata di tutti ed usate da molti:
https://helpcenter.websitex5.com/it/post/161231#comment4 (Mt:7.6)
... non ho visto esempi, ...ma, ...a secondo dei casi, come ho più volte esposto, forse si potrebbe anche andare oltre...
... ovviamente, come ho detto altre volte e ricordato anche da Stefano, usando gli Ancoraggi storici non ci sarebbero problemi...
.
ciao
.
Autore
Ciao Kol, grazie per le dritte... Purtroppo non è un sito mio che gestisco io e che posso "infarcire" con molto codice extra, il titolare del sito preferisce a quel punto eliminare le ancore e sistemare la cosa diversamente. Se il sito fosse il mio, con quel po' di conoscenze di HTML e CSS, riuscirei a gestire il codice extra senza problemi, come faccio per altri siti miei personali ma non è questo il caso.
P.S. non so cosa intendi per "... usando gli Ancoraggi storici non ci sarebbero problemi...".
Questi sono i due esempi:
1) Pagina senza oggetto accanto all'Accordion Text/FAQ (Elenco regioni): https://www.test70.altervista.org/ancore/operatori.html (le ancore non funzionano nè da DESKTOP nè da MOBILE)
2) Pagina con Oggetto di circa 500 px (Mappa Italia) accanto all'Accordion Text/FAQ (Elenco regioni): http://www.test70.altervista.org/ancore/operatori2.html (in questo caso da DESKTOP, solo da DESKTOP, le ancora funzionano a dovere, alle altre risoluzioni al di sotto dei 1150 px non funzionano più)
...ciao, ... gli Ancoraggi storici sono appunto quelli HTML di oltre 40 anni fa, cioè i Segnalibri degli Ipertesti che rispettano il formato cartaceo, replicabile in stampa e PDF, né più e né meno; ...con questa formattazione non esistono problemi...
... poi, per il tuo cliente non sarà un problema, in quanto non deve gestire nessun codice, e poi vedo che fa già uso di alcuni miei codici EXTRA per il controllo delle tabelle, pertanto codice in più o meno non farebbe differenza e non se ne accorgerebbe...
...
... vado a vedere meglio la struttura e funzionamento del tuo esempio, e poi ti faccio sapere su quel che si può fare, ma a prima vista ricordo che avevo già trattato con mio codice esclusivo casi simili per le tab/schede da cui poter prendere spunto: https://helpcenter.websitex5.com/it/post/243645
.
... a dopo...
.
ciao
.
Autore
Sì Kol, per le tabelle ho usato la tua stringa per renderle elastiche + altri accorgimenti integrati da me ed in effetti funzionano senza problemi.
Autore
Ok Kol, provo poi ad integrare lo script che hai consigliato nel Topic spagnolo, grazie
... OK, ... il mio codice di BASE per il tuo esempio:
<script>
$("document").ready(function() { //K>
ritardoK= 4; // = secondi di ritardo da valutare;
setTimeout(function() { //K1>
$(".accordion_text a").click(function() { //K2>
k= $(this).attr("href");
setTimeout(function() { //K3>
x5engine.utils.location(k, null, false);
},1500);//K3<<
})//K2<<
},ritardoK*1000);//K1<<
});//K>>
</script>
.
... OK (2), ... il mio codice con PRELOAD per il tuo esempio; ...il preload (meglio scaricarlo) serve per valutare i secondi di ritardo, e deve spegnersi dopo l'apparizione dell'Accordion:
<script>
$("document").ready(function() { //K>
ritardoK= 4; // = secondi di ritardo da valutare; Ancoraggio ritardato by KolAsim
//---preloderK-----
preK='<div id="loaderK" style="position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:1000000; background-color:rgba(0,0,0,0.5);background-image: url(\'https://hello-site.ru/main/images/preloads/tail-spin.svg\');background-repeat: no-repeat; background-attachment: fixed; background-position: center center;background-size:20%"> </div>';
$("body").append(preK);
//--- fine preloderK...
setTimeout(function() { //K1>
$(".accordion_text a").click(function() { //K2>
k= $(this).attr("href");
setTimeout(function() { //K3>
x5engine.utils.location(k, null, false);
},1500);//K3<<
})//K2<<
$("#loaderK").hide();
},ritardoK*1000);//K1<<
});//K>>
</script>
.
ciao
.
... ti stupirà ...
...
Autore
Ok Kol, ti aggiorno appena inserisco il codice nel mio esempio online :-) Grazie
Autore
Kol, funziona perfettamente, grazie:
https://www.test70.altervista.org/ancore/operatori.html
Ciao
... ho visto, ... funziona molto bene sul mio smartphone, secondo le aspetttive, .. ma non sul mio vecchio(!) PC per ritardo troppo basso...
.. comunque, escluso il mio PC, ...è OK... ... e grazie per il test...
... ah! ...meglio non alterare la funzione del ritardo, bensì srebbe meglio agire solo sulla variabile...
... per esempio: > ritardoK = 0.5; (per mezzo secondo); > ritardoK = 1.5; (per un secondo e mezzo); eccetera...
... secondo me, visto che l'Ancora non può essere subito azionata, forse un ritardo di 2-3 secondi interi potrebbe essere equo, e volendo, si potrebbe fare a meno del preload...
.
ciao
.
... intanto che osservavo il funzionamento della tu pagina, mi è venuta in mente un'altra mia invenzione, quella del div-sino...
... si accorcerebbe lo sviluppo verticale sei contenuti per una consultazione più facilitata e forse meno macchinosa...
... visto che sei in fase di sviluppo, se ti interessa potresti provarci per valutare, con impegno né più né meno di quello che hai appena provato prima...
ciao
.
Autore
Ciao Kol, in effetti ho variato i valori perchè stavo facendo alcune prove, poi non ho più rimesso quelli consigliati da te sulla prova online.
Sì, sarei interessato all'altra tua invenzione, quella del div-sino. Grazie
... volentieri; ... adesso però esco e se ne riparlerà in serata o domani...
... intanto solo per avere un'idea, dei vari Topic con delle varianti diverse ho trovato solo questo ancora consultabile:
https://helpcenter.websitex5.com/it/post/230436
.
... OK ... ... ho cercato di evitare le funzioni individuali del precedente codice, anche se in teoria forse sono più semplici...
... comunque puoi provarlo su questa tua pagina:
https://www.test70.altervista.org/ancore/operatori.html#imCell_182
........................................................
<style>
/** -- x div_sino by KolAsim -- **/
div[id^='imCellStyleTitle_']:hover {cursor:pointer;color:white !important;}
.chiudeK:hover {cursor:pointer;background:red !important}
.apreK:hover {cursor:pointer;background:yellow !important}
div[id^='imTableObject_230_'] {overflow-x:hidden !important}
</style>
<script>
/** -- div_sino by KolAsim -- **/
$( document ).ready(function() {//K
ritardo_K=3;
setTimeout(function(){//K0>
chiudeK='<div class="chiudeK" style ="position:absolute;top:-20px;right:10px;width:30px;height:30px;background:black;z-index:10;border-radius:42.3px;border: solid 2px; border-color: silver;cursor:pointer" alt="chiude" title="chiude"></div>';
apreK='<div class="apreK" style ="position:absolute;top:-20px;right:10px;width:25px;height:25px;background:white;z-index:11;border-radius:35.25px;border: solid 2px; border-color: silver;cursor:pointer" alt="apre" title="apre"></div>';
$("div[id^='imCellStyleTitle_']").append(apreK);
nK=0;
$("div[id^='imTableObject_230_'] table").hide();
$("div[id^='imCellStyleTitle_']").click(function() {//K1
if (nK == 1) {//K2
$("div[id^='imTableObject_230_'] table").hide();
nK=0;
} //K2<<
else {//K3
idk=$(this).attr("id");
idk= Number(idk.match(/\d+/) );
idkk="#imTableObject_230_"+idk;
cellK="#imCell_"+idk;
$(".chiudeK").hide();
$(cellK).append(chiudeK);
$(".chiudeK").click(function() {//K4>
$("div[id^='imTableObject_230_'] table").hide();
$(this).hide();
});//K4<<
$(idkk+" table").show();
$("div[id^='imTableObject_230_'] table").hide();
$(idkk+" table").show();
location.href = "#imCell_" + idk;
setTimeout(function(){//K5>
topk=$(window).scrollTop();$(window).scrollTop(topk-80);
}, 1000) ;//K5<<
}//K3<<
})//K1<<
}, ritardo_K * 1000) ;//K0<<
});//K<<
</script>
.
ciao
.
Autore
Ciao Kol. ho provato al volo in locale su Website X5: funziona benissimo! Complimenti.
Poi pubblico anche l'esempio online, ora sto scappando. Ciao
...buon notizia, .. grazie per il test... ... ciao...