Lista multi-livello comprimibile su smartphone.

**mrics** · 11-02-2019, 23:43

Ciao a tutti,
è il mio primo messaggio sul forum, non sono un programmatore, sono arrivato qui indirizzato da Google perchè la mia questione ha a che fare con l'HTML, spero sia il posto adatto.
In breve si tratta di questo: pur non essendo programmatore qualche conoscenza proprio elementare dell'HTML ce l'ho, così mi è venuta l'idea di usarlo per realizzare degli "auto-questionari", in pratica un elenco di domande dove la risposta è nascosta e compare solo se si clicca una crocetta a fianco della domanda.
L'uso è per lo studio, per memorizzazione e poi ripassare i concetti.
In rete ho trovato già pronto il codice che mi permette di ottenere il risultato, una visualizzazione multi-livello che si può espandere/comprimere cliccando una crocetta.
Il problema è che funziona solo su PC, su uno smartphone la visualizzazione a livelli non funziona (anche scegliendo visualizzazione desktop sul browser), vengono mostrati contemporaneamente tutti i livelli come fosse una semplice pagina HTML, insomma domanda e risposta sono mostrate contemporaneamente.
L'uso solo su PC è limitativo, perchè il PC ce l'ho solo in casa, lo smartphone ovunque, anzi dovendo scegliere preferirei funzionasse solo su smartphone.
Ho cercato in rete e visto che differenze di comportamento tra PC e smart sono un problema ricorrente, ma una soluzione applicabile al mio caso non l'ho trovata.
Allego uno zip di esempio, se lo aprite su un PC potete farvi una bella auto-interrogazione sulla grammatica inglese.

In rete ho trovato anche un codice ad un solo livello che funziona sia su PC che smartphone, però con un solo livello non si possono organizzare le domande per argomento, che, come vedete dall'esempio è indispensabile, altrimenti un'unica lista è troppo lunga e il tutto diventa inutilizzabile.
Allego anche quest'ultimo codice nel caso fosse più semplice trasformare questo in multi-livello piuttosto che mettere mano all'altro.
La pagina da visualizzare è sempre in locale (memoria del dispositivo).
Un grazie anticipato a chi riesce a restituirmi un codice modificato in modo che funzioni su smartphone.

**mrics** · 12-02-2019, 16:23

Se la richiesta è eccessiva (non essendo programmatore non sono in grado di valutarlo) mi basterebbe un codice di esempio di liste multi-livello comprimibili/espandibili che funzioni su smartphone.
In rete ho trovato un paio di esempi, ma entrambi funzionano solo con il browser su PC.

**mrics** · 12-02-2019, 19:28

Non so se in questo modo è più semplice.
Questo è il codice a un livello che funziona sia su PC che smartphone, si tratterebbe di inserire ulteriori livelli all'interno.

codice:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Testo 1.</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Testo 2.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Testo 3.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Testo 4.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

**mrics** · 13-02-2019, 23:09

OK ci sono riuscito con le mie sole forze (d'altra parte non c'era alternativa

).
Sono partito dalla considerazione che il codice che funziona non ha java script mentre i due che non funzionano si.
Mi quindi messo a cercare un codice multi-livello scritto senza usare java script, è stata una ricerca estenuante, Google mi ha perfino bloccato le ricerche dicendo che c'era un traffico anomalo dal mio IP

, ma alla fine è saltato fuori e FUNZIONAAAAAAAAAAAAAAAAAAAAA!

**Vincent.Zeno** · 13-02-2019, 23:35

a questo punto dovresti postare la soluzione trovata, in modo da condividerla.

**mrics** · 14-02-2019, 02:02

Originariamente inviata da Vincent.Zeno

a questo punto dovresti postare la soluzione trovata, in modo da condividerla.

Ecco qua.
Metto il codice originale che ho trovato, io, pur non sapendo un'acca di HTML, a intuito e tentativi l'ho migliorato decisamente dal punto di vista estetico

, ma uno che dovesse usarlo è meglio parta dall'originale

.
In realtà anche questo codice ha la sua (piccola) magagna, ogni nuovo testo che introduco devo anche incrementare e aggiornare la stringa id="cbn", l'ideale sarebbe semplicemente inserire i testi e basta.

codice:

<head><style>


ul { list-style-type: none; }
label{
    background-color: #AAAFAB;
    border-radius: 5px;
    padding: 3px;
    padding-left: 25px;
    color: white;    
}
li { 
    margin: 10px;
    padding: 5px;
    border: 1px solid #ABC;
    border-radius: 5px;
}
input[type=checkbox] { display: none; }
input[type=checkbox] ~ ul { 
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space:nowrap;
   -webkit-transition:all 1s ease;  
   -moz-transition:all 1s ease;  
   -o-transition:all 1s ease;  
   transition:all 1s ease;  
    
}
input[type=checkbox]:checked ~ ul { 
    max-height: 100%;
    max-width: 100%;
    opacity: 1;
}
input[type=checkbox] + label:before{
    transform-origin:25% 50%;
  border: 8px solid transparent;
  border-width: 8px 12px;    
  border-left-color: white;
  margin-left: -20px;
    width: 0;
    height: 0;
    display: inline-block;
    text-align: center;
    content: '';
    color: #AAAFAB;
   -webkit-transition:all .5s ease;  
   -moz-transition:all .5s ease;  
   -o-transition:all .5s ease;  
   transition:all .5s ease; 
    position: absolute;
    margin-top: 1px;
}
input[type=checkbox]:checked + label:before {
    transform: rotate(90deg);
    /*margin-top: 6px;
  margin-left: -25px;*/
}
</style>
</head>


<ul>
    <li><input type="checkbox" id="cb1"/><label for="cb1">Level 1</label>
        <ul>
            <li><input type="checkbox" id="cb2"/><label for="cb2">Level 2-A</label>
                    <ul>
                        <li><label>Level 3-A</label> Content</li>
                        <li><label>Level 3-B</label> Content</li>
                    </ul>
            </li>
            <li><input type="checkbox" id="cb3"/><label for="cb3">Level 2-B</label>
            <ul>
                <li><input type="checkbox" id="cb5"/><label for="cb5">Level 3-A</label>
                    <ul>
                        <li><label>Level 4-A</label> Content</li>
                        <li><label>Level 4-B</label> Content</li>
                        <li><label>Level 4-C</label> Content</li>
                        <li><label>Level 4-D</label> Content</li>
                    </ul>
                </li>
            <li><input type="checkbox" id="cb6"/><label for="cb6">Level 3-B</label>
                    <ul>
                        <li><label>Level 4-A</label> Content</li>
                        <li><label>Level 4-B</label> Content</li>
                    </ul>
                </li>
            <li><input type="checkbox" id="cb7"/><label for="cb7">Level 3-C</label>
                    <ul>
                        <li><label>Level 4-A</label> Content</li>
                        <li><label>Level 4-B</label> Content</li>
                        <li><label>Level 4-C</label> Content</li>
                    </ul>
                </li>
        </ul>
            </li>
            <li><input type="checkbox" id="cb4"/><label for="cb4">Level 2-C</label>
                    <ul>
                        <li><label>Level 3-A</label> Content</li>
                    </ul>
            </li>
        </ul>
    </li>
</ul>

**mrics** · 14-02-2019, 22:20

Ahi ahi, ho scoperto un difetto non da poco del codice senza java script, NON FA LO SCROLL VERTICALE AUTOMATICO quando si apre l'ultimo livello.

Così quando arrivo a fondo pagina sono obbligato a scrollare manualmente per creare lo spazio per leggere il testo, quindi scrolla-apri risposta, scrolla-apri risposta, scrolla- apri ... così non va.

Googlando ho ricavato il terribile sospetto che lo scroll automatico si può fare solo con java script, confermate????????????

**Vincent.Zeno** · 14-02-2019, 23:15

ho provato il tuo codice d'esempio: si comporta come è normale che si comporti.

il browser non può riposizionare la pagina in base all'apertura dei contenuti senza uno script (javascript o altri elaborati come jquery) che gli dica cosa fare.
quindi si: confermo l'ultima cosa che hai detto.

**mrics** · 15-02-2019, 00:19

Originariamente inviata da Vincent.Zeno

ho provato il tuo codice d'esempio: si comporta come è normale che si comporti.

il browser non può riposizionare la pagina in base all'apertura dei contenuti senza uno script (javascript o altri elaborati come jquery) che gli dica cosa fare.
quindi si: confermo l'ultima cosa che hai detto.

OK grazie.
Vabbè dai, non è male neanche così

, fare uno scroll, specie su un touch screen, non è che ci voglia molto.

**mrics** · 15-02-2019, 16:18

Ragazzi penso di aver raggiunto il massimo che si può fare senza java script.

Riguardo il fatto di dover scrollare in alto continuamente quando si arriva a fondo pagina, ho migliorato le cose creando un button fisso a fondo pagina che la fa scrollare in alto di una misura fissa, così è molto più comodo, specie sul touch perchè il ditino deve fare meno strada, non serve calibrare velocità ed entità del movimento, questo significa meno energia consumata e conseguente riduzione di emissioni di CO2, una programmazione attenta all'ecologia insomma.

Ancora una volta ho fatto lavorare parecchio Google (se continuo così questi mi bloccano definitivamente l'IP).

Immagino che anche di questo volete il codice, ah ... proprio il mondo alla rovescia, chi non sa niente di programmazione che spiega le cose agli esperti.

codice:

<style>
button {
  background: #fff;
  border: 1px solid #19395F;
  border-radius: 8px;
  padding: 10px;
  position: fixed;
  bottom: 4px;
  right: 4px;
}
</style>


<body>
<button onclick="scrollWin()">Up</button>
...


<script>
var h = window.innerHeight - window.innerHeight/10;
function scrollWin() {
  window.scrollBy(0, h);
}
</script>

Discussione: Lista multi-livello comprimibile su smartphone.

Strumenti discussione

Ricerca discussione

Visualizza

Lista multi-livello comprimibile su smartphone.

Permessi di invio