WebSite X5Help Center

 
Luca L.
Luca L.
User

Oggetto tabella schede attive v.14  it

Autor: Luca L.
Besucht 2431, Followers 4, Geteilt 0  

Buon giorno,

vorrei segnalare che utilizzando la madalità responsive in v.14

Creando una tabella con l'utilizzo di schede attive, ogni volta che la barra del browser dello smartphone (sia apple che android) si rimpicciolisce, a seguito di uno scorrimento verso il basso del dito, si verifica un rimandano in automatico sulla prima scheda attivà (come se si ricaricasse da capo). Questo è un problema perchè se sto consultando una scheda attiva e scrollo verso il basso mi rimanda alla prima scheda attiva senza poter finirne la consultazione.

Premetto che ho utilizzato questo codice per bloccare lo scroll delle schede: 

Vi allego un'immagine per farvi capire meglio.

Tutto ciò si verifica solo sul telefono tenuto in verticale.

Spero di essermi spiegato. 

Auguro a tutti una buona giornata. 

Gepostet am
35 ANTWORTEN
Luca L.
Luca L.
User
Autor

Chiedo scusa ho sbagliato, il codice che sto utilizzando nell'head della pagina per bloccare lo scroll delle schede è questo:

<script> $( document ).ready(function() { $("#imTableObject_11_108").append("<div style='position:absolute;width:100%;height:100%;z-index:2;top:40px;'> </div>");}); </script>

e non quello che ho messo nel primo messaggio...

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Qualcuno dello staff potrebbe gentilmente rispondere? Gazie tanto e buona giornata.

Mehr lesen
Gepostet am von Luca L.
Incomedia
Riccardo P.
Incomedia

Buongiorno Luca,

dovresti provare a lasciare più margine fra la tabella e il bordo del sito così da avere più spazio per il "dito" per scorrere. Se infatti scorri posizionando il "dito" sulla tabella questa scorre fra le schede.

Fammi Sapere.

Mehr lesen
Gepostet am von Riccardo P.
Luca L.
Luca L.
User
Autor

Buon giorno Riccardo e grazie per la risposta. 

Il problema non riguarda il margine da lasciare perché con o senzadi esso il problema si verifica lo stesso.

Per evitare lo scorrimento orizzontale delle schede ho inerito nell'head della pagina il codice:

 <script> $( document ).ready(function() { $("#imTableObject_11_108").append("<div style='position:absolute;width:100%;height:100%;z-index:2;top:40px;'> </div>");}); </script>

Il problema riguarda solo la visuale su smrtphone in verticale (apple e adroid), in pratica quando si scorre con il dito e la barra del browser si rimpicciolisce (VEDI ALLEGATO NEL MIO PRIMO MESSAGGIO PER CAPIRE MEGLIO), la tabella si "resetta" tornando in automatico sulla prima scheda attiva. 

Ti scrivo il link così puoi vederlo, se puoi, su un telefono. 

http://www.palestretorino.com/club-assarotti.html

PS è la tabella a fondo pagina. Se provi ad andare su un giorno a caso che non sia lunedì e provi a scorrere vedrai il problemba. 

Attendo un gentile riscontro, avrei davvero bisogno di risolvere il problema dato he la visualizzazione su smartphone è oramai la più utilizzata. 

Grazie 1000!!

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Grazie tanto A.KRris per l'interessamento! Avevo già guardato questo post, ma non è la soluzione al mio problema. 

La tabella che ho utilizzato revede le schede attive e anche se non è responsive va bene lo stesso perché le misure che ho utilizzato vanno bene sia per desktop che per smartphone. 

Il problema che non risco a risolvere è il ricaricamento automatico delle schede attiva quando la barra browser degli smartphone si restringe (VEDI ALLEGATO NEL MIO PRIMO MESSAGGIO PER CAPIRE MEGLIO). 

Grazie davvero per l'aiuto!

Mehr lesen
Gepostet am von Luca L.
Giorgio C.
Giorgio C.
User

Secondo il mio parere il comportamento delle schede di testo é corretto, nel senso che scorrendo su di esse si cambia la scheda

Il problema nasce in responsive in quanto la barra di scorrimento laterale destra é troppo stretta per essere usata senza interferire sullo spazio sensibile della scheda

Sarebbe utile, sempre che sia possibile, che la funzione scorrimento/cambio scheda, si disattivi in responsive, lasciando alle sole tab la possibilitá di cambio scheda

ciao

Mehr lesen
Gepostet am von Giorgio C.
Luca L.
Luca L.
User
Autor

Ciao Giorgio, grazie per la risposta!

Ho risolto il problema dello scorrimento orizzontale delle schede attive con il codice (suggeritomi gentilmente da Kolasim): 

 <script> $( document ).ready(function() { $("#imTableObject_11_108").append("<div style='position:absolute;width:100%;height:100%;z-index:2;top:40px;'> </div>");}); </script>

Il mio problema si riferisce solo alla visualizzazione verticale su smartphone e nello specifico quando le barre del browser di Apple o Android si rimpiccioliscono (o compare la barra dei menu in basso) mi resettano la tabella portandola alla proma scheda attiva. (VEDI ALLEGATO NEL MIO PRIMO MESSAGGIO PER CAPIRE A COSA MI RIFERISCO). 

PEr capire a cosa mi riferisco occorre guardare il mio allegato nel primo messaggio (è una foto)

Grazie 

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Comunque sono daccordo con la proposta di Giorgio C.:

che la funzione scorrimento/cambio scheda, si disattivi in responsive, lasciando alle sole tab la possibilitá di cambio scheda.

Questo potrebbe evitare di inserire codici esterni

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Giorgio G. io per il momento ho risolto con il codice:

 <script> $( document ).ready(function() { $("#imTableObject_11_108").append("<div style='position:absolute;width:100%;height:100%;z-index:2;top:40px;'> </div>");}); </script>

Questo ti blocca il cambio scheda orizzontale. Mettilo nella head della pagina. 

Resta però il problema che ho descritto all'inizio....spero esista per il momento almeno un codice eterno che possa risolvere il mio problema. 

Mehr lesen
Gepostet am von Luca L.
Giorgio C.
Giorgio C.
User

Grazie per il suggerimento, ma quello che disturba è il movimento verticale dello scroll della pagina.

Mehr lesen
Gepostet am von Giorgio C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Luca L.
Qualcuno dello ha qualche suggerimento? Ecco il link della mia tabella con il problema:  http://www.palestretorino.com/club-assarotti.html

... quel codice non è adatto per l'esempio di Giorgio, essendo presenti dei link all'interno delle schede...

... per poter eventualmente capire da dove derivasse e se fosse possibile controllare in un certo qual modo il problema sul tuo  i(!)  ...che puoi verificare solo tu, ... prova ad incollare prima della chiusura di /BODY questa stringa di codice:

<div id="DIV_CUSTOM_K" style="position: fixed; width:100%;height:100%; top: 0px;left: 0px; background: rgba(0, 0, 0, 0.5);z-index:20000">
</div>

... l'effetto che si dovrebbe riscontrare sarebbe la schermatura di tutta la pagina, disabilitando in todo qualsiasi azione...

... verifica sul tuo dispositivo i(!) se la scheda continuasse ad essere attiva allo scroll, il che nel caso sarebbe molto strano...

... eventualmente in tarda serata ci risentiremo...

.

... intanto che ci sei, verifica l'aspetto della tabella alle varie risoluzioni schermo che non mi sembrano adeguate...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Ciao KolAsim, grazie per il supporto! 

Ho applicato il codice come mi hai detto ma in questo modo blocca tutto... I tab delle schede non funzionano più e in aggiunta tutta la pagina è schermata con una filigrana nera opaca.... 

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Luca L.
... ... ... ma in questo modo blocca tutto... I tab delle schede non funzionano più e in aggiunta tutta la pagina è schermata con una filigrana nera opaca.... 

... è quello ce ti avevo detto:

 ‪ KolAsim ‪ ‪
... ... ... ... l'effetto che si dovrebbe riscontrare sarebbe la schermatura di tutta la pagina, disabilitando in todo qualsiasi azione... ... verifica sul tuo dispositivo i(!) se la scheda continuasse ad essere attiva allo scroll, il che nel caso sarebbe molto strano... ... ...

... hai verificato con quel dispositivo che hai tu...?...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Si si verificato sul dispositivo (quello che sai tu... laughing). Nessuno scroll attivo sulla scheda, tutto bloccato! 

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Ora ho rimosso l'ultimo codice che mi hai girato altrimenti non posso più utilizzare la pagina. E' snervante non poter riuscire a risolvere questo problema!! 

Cmq grazie per il supporto e la pazienza!

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... fai l'ultima prova con questo:

<script> function controlloK1() { var hdivK = document.getElementById('imTableObject_11_115').offsetHeight;
var hdivK2 = document.getElementById('imPageRow_6').offsetHeight;
var hdivK1 = hdivK2 - hdivK; var topK = hdivK1 + 20;
var divK = "<div id='k' style='position:absolute;z-index:20000;width:100%;height:"+hdivK+"px;z-index:2;top:"+topK+"px;background-color:red;opacity:0.5'> </div>";
document.getElementById("imPageRow_6").innerHTML += divK;}
function controlloK2() {document.getElementById("k").remove();}
window.onload = function () {controlloK1();}
window.onresize = function () {controlloK2();controlloK1();} </script>

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Ciao KolAsim, con l'ultimo codice (con schermatura rossa solo sulla tabella) i tab della tabella sono bloccati e quindi non si riescono a scorrere le schede. 

Grazie come sempre del tempo speso!

PS  il codice andava incollato prima della chiusura di /BODY , giusto? 

Grazie 

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Luca L.
... ... ... PS  il codice andava incollato prima della chiusura di /BODY , giusto? Grazie 

...!... potrebbe star bene anche lì, ...ma il posto più corretto sarebbe al posto del precedente codice, prima della chiusura di /HEAD

... per eliminare il colore rosso trasparente elimina dal codice questa stringa:

background-color:red;opacity:0.5

......................

... ti consiglio di aggiungere un altro codice, questo però prima della chiusura di /BODY :

<script>$("table").css("width", "");</script>

... è una mia idea per rendere il contenuto della tabella "elastico"  a vantaggio della visualizzazione della stessa rispetto a come si vede adesso...

.

ciao 

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Come sempre ....Grazie KolSaim!

allora ho sostituito il codice (senza parte del colore rosso) prima del /HEAD e ho poi aggiunto il tuo ultimo codice (<script>$("table").css("width", "");</script>) prima della chiusura di /BODY. 

Così facendo però restano bloccate le schede attive, cioè si vede la prima scheda (LUN) ma quando clicco sui tab degli altri giorni la funzione è disattivata, come se fosse bloccata. 

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Aspetta rettifico il mio ultimo commento. Dunque sul telefono il problema è in parte risolto: in pratica adesso FINALMENTE le schede non si resettano più sulla prima scheda ma ogni tanto i comandi dei tab non rispondono bene. Mentre invece sulla visualizzazione DESKTOP i TAB dei giorni sono bloccati, quindi non si riescono a scorrere le schede.

Però secondo me ci siamo quasi.....

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Ricapitolando (per non fare confuzione) adesso sono a queste impostazioni:

PRIMA DELLA CHIUSURA DEL /HEAD: 

<script> function controlloK1() { var hdivK = document.getElementById('imTableObject_11_115').offsetHeight;
var hdivK2 = document.getElementById('imPageRow_6').offsetHeight;
var hdivK1 = hdivK2 - hdivK; var topK = hdivK1 + 20;
var divK = "<div id='k' style='position:absolute;z-index:20000;width:100%;height:"+hdivK+"px;z-index:2;top:"+topK+"px;'> </div>";
document.getElementById("imPageRow_6").innerHTML += divK;}
function controlloK2() {document.getElementById("k").remove();}
window.onload = function () {controlloK1();}
window.onresize = function () {controlloK2();controlloK1();} </script>

PRIMA DELLA CHIUSURA DEL /BODY: 

<script>$("table").css("width", "");</script>

Mehr lesen
Gepostet am von Luca L.
Luca L.
Luca L.
User
Autor

Un altra cosa: quando giro il telefono da verticale ad orizzontale, ho lo stesso problea del desktop (non funzionano i tab), e poi qundo lo rigiro in verticale impazzisce tutta la tabella...

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... sì, per il codice dovrebbe andar bene...

... per i pulsanti noto che sono attivi e l'ancoraggio si vede sulla barra indirizzi, ma del perchè non funzioni li cambio schede non saprei...

... se eliminato il mio codice funzionassero, allora bisognerò trovare qualche altro accorgimento...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Ciao KolAsim, eliminando il codice i TAB funzionano, ma siamo però punto a capo....yell

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Luca L.
Ciao KolAsim, eliminando il codice i TAB funzionano, ma siamo però punto a capo....

... son rientrato adesso... ...magari proverò più tardi a clonare la tua pagine con il DIV_CUSTOM, visto che hai detto che funziona...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

GRAZIEEE!!!!!

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... ho visto che la tabella non l'hai ancora sistemata a dovere, in quanto si presenta male; stretta rispetto alla larghezza disponibile della pagina alle varie risoluzioni; proprio da sistemare...

... ora come ora, per quel che si vede adesso, questo è il >> CLONE  da provare sul "coso"...

... se non dovesse funzionare, allora senza programma e senza il "coso"  non  posso andare oltre...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Ciao KolAsim come sempre grazie e poi ancora grazie per tutto il tempo che ci dedichi!

Per quanto riguarda la tabella appena si troverà una soluzione la sistemo nelle varie risoluzioni. 

Dunque, purtroppo ho fatto il test sul mio "coso" del tuo CLONE ma il problema persiste. 

Questo problema è comune anche su tutti i "cosi" Android, praticamente la tabella si resetta sulla prima scheda ogni volta che ricompare il menù dei comandi sul browser del telefono. 

Peccato perché se non fosse per questa cosa il tuo codice era perfetto!!

Ti ringrazio comunque per tutto il supporto!!!

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... mi dispiace, proprio adesso ho potuto provare su due tablet Android (di passaggio) ed un Win.10, ... tutto OK...tongue-outlaughing...wink

.

ciao

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

Sui tablet funziona su tutti, è solo sui telefoni (di tutte le marche!! tongue-out) che non funziona bene. 

Grazie comunque KolAsim, sei un grande!

Mehr lesen
Gepostet am von Luca L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Luca L.
... ... è solo sui telefoni (di tutte le marche!! ) che non funziona bene.  ... ...

 ... NO!!!! ... undecided   ... sul telefonino di passaggio, SONY XPERIA Android.6.0.1 ... funziona perfettamente...wink...

... gli i(altri) per me sono obsleti...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Luca L.
Luca L.
User
Autor

AHAHAH OK!!! ;-) tongue-out

Mehr lesen
Gepostet am von Luca L.