Espandere una riga di testo al clic o passaggio del mouse

[osborn87]

Ciao a tutti!
Avrei da chiedervi una domanda che credo sia inerente all'ambito CSS.

In questa pagina http://www.quartettoguadagnini.com/#section-agenda

c'è un elenco di date di concerti formati tutti da due righe (una con la città, la data ecc... e l'altra con i dettagli dell'evento.) Il plugin utilizzato si chiama GigPress e sto lavorando con Wordpress (un CMS ancora poco conosciuto da me).

Io, per avere un lavoro più pulito, vorrei che inizialmente si vedessero solamente le righe con la città, la data ecc...e poi, una volta cliccato (o al passaggio del mouse) si espandesse la riga sottostante con i dettagli.

E' possibile farlo in CSS e se si, con quale codice?

GRAZIE :-)

[KillerWorm]

Ciao, quello che chiedi non è così scontato o semplice come potrebbe sembrare.
Prima di tutto stai lavorando su un CMS ed in particolare stai andando a modificare un plugin. Giusto per metterti in guardia, qualsiasi aggiunta/modifica potrebbe comportare degli effetti collaterali e compromettere le funzionalità del plugin stesso se non sai esattamente come e dove operare.
A parte questo, per l'effetto sul click, troverei più appropriata una soluzione JavaScript/jQuery.

Ad ogni modo puoi tentare comunque qualcosa per l'hover col css.

Prova ad aggiungere queste righe da qualche parte tra le regole del tuo css (dovrebbe funzionare ma non ti garantisco niente):

table.gigpress-table tr.gigpress-info{
  -webkit-transition: opacity .5s, line-height .5s;
     -moz-transition: opacity .5s, line-height .5s;
          transition: opacity .5s, line-height .5s;
  line-height: 0px;
  opacity: 0;
}
tr.gigpress-info:hover, tr.gigpress-row:hover ~tr.gigpress-info{
  line-height: 100%;
  opacity: 1;
}

---

PS: giusto un consiglio. Alla fine della sezione "BIOGRAFIA" c'è uno slide di testo che varia in altezza a seconda del testo visualizzato. Questo crea un fastidiosissimo su-e-giù della pagina quando ci si trova nelle sezioni che seguono. Magari si può fissare in qualche modo l'altezza di quell'affare, così da evitare il mal di mare a qualche visitatore.

PPS: giusto un altro consiglio. Verifica e correggi gli errori di validazione. Sulla pagina ce ne sono una trentina (puoi vedere su validator.w3.org).

[osborn87]

Ciao, quello che chiedi non è così scontato o semplice come potrebbe sembrare.
Prima di tutto stai lavorando su un CMS ed in particolare stai andando a modificare un plugin. Giusto per metterti in guardia, qualsiasi aggiunta/modifica potrebbe comportare degli effetti collaterali e compromettere le funzionalità del plugin stesso se non sai esattamente come e dove operare.
A parte questo, per l'effetto sul click, troverei più appropriata una soluzione JavaScript/jQuery.

Ad ogni modo puoi tentare comunque qualcosa per l'hover col css.

Prova ad aggiungere queste righe da qualche parte tra le regole del tuo css (dovrebbe funzionare ma non ti garantisco niente):

table.gigpress-table tr.gigpress-info{
  -webkit-transition: opacity .5s, line-height .5s;
     -moz-transition: opacity .5s, line-height .5s;
          transition: opacity .5s, line-height .5s;
  line-height: 0px;
  opacity: 0;
}
tr.gigpress-info:hover, tr.gigpress-row:hover ~tr.gigpress-info{
  line-height: 100%;
  opacity: 1;
}

---

PS: giusto un consiglio. Alla fine della sezione "BIOGRAFIA" c'è uno slide di testo che varia in altezza a seconda del testo visualizzato. Questo crea un fastidiosissimo su-e-giù della pagina quando ci si trova nelle sezioni che seguono. Magari si può fissare in qualche modo l'altezza di quell'affare, così da evitare il mal di mare a qualche visitatore.

PPS: giusto un altro consiglio. Verifica e correggi gli errori di validazione. Sulla pagina ce ne sono una trentina (puoi vedere su validator.w3.org).

Sei un genio! Ora va molto meglio! Devo solo personalizzarmelo come meglio credo...
Per il primo PS...non so come fare per bloccare l'altezza; tu hai un'idea?
Per il secondo PPS...devo sistemare gli errore uno ad uno nel codice?

GRAZIE MILLE!!!!

[osborn87]

Volevo eliminare quella riga vuota che c'era subito dopo la riga contenente la data ecc...e ce l'ho fatta ma si è disattivato l'effetto transizione...
Questo il codice...che cavolata ho combinato? :-)

table.gigpress-table tr.gigpress-info{
-webkit-transition: opacity .5s, line-height .5s, display 2s, background-color 2s;
   -moz-transition: opacity .5s, line-height .5s, display 2s, background-color 2s;
        transition: opacity .5s, line-height .5s, display 2s, background-color 2s;
line-height: 0px;
opacity: 0;
background-color: none;
display: none;
}
tr.gigpress-info:hover, tr.gigpress-row:hover ~tr.gigpress-info{
line-height: 100%;
opacity: 1;
background-color: #b3e7dd;
display: table-row;
}

[KillerWorm]

Per il primo PS...non so come fare per bloccare l'altezza; tu hai un'idea?

Essendo un layout responsive (flessibile) è difficile agire in modo diretto su quell'elemento senza rischiare di compromettere la corretta visualizzazione del layout stesso.
Un consiglio è quello di cercare nella documentazione del plugin in questione, magari puoi impostare qualche parametro o usare particolari funzioni che risolvono il problema.
Personalmente non conosco il plugin ma facendo qualche ricerca ho potuto constatare che si tratta di un problema noto.
https://www.google.it/?gws_rd=ssl#q=...r+height+issue
Se spulci tra i risultati dovresti trovare qualche soluzione proprio riguardo a leyout flessibili.

Per il secondo PPS...devo sistemare gli errore uno ad uno nel codice?

Ti direi che tutto è relativo.
Se vuoi un lavoro fatto ad regola d'arte, sarebbe opportuno correggere tutti gli errori.
Inutile dire che in generale un codice perfettamente valido è meglio che uno con degli errori. Ma chiaramente tutto il discorso può essere contestualizzato. In alcune situazioni, ad esempio su siti personali, (dove non si hanno obblighi restrittivi come può essere per siti di tipo istituzionale, magari nell'ambito dell'accessibilità) si potrebbe sorvolare su vari ed eventuali errori che magari non influiscono più di tanto sulla funzionalità generale del sito.

Tieni presente però che ogni browser cerca di interpretare e risolvere a proprio modo i diversi errori o, se non riesce, li ignora direttamente. Questo può comportare dei mal funzionamenti differenti a seconda del browser usato, e compromettere quindi la corretta navigazione del sito da parte degli utenti che lo visitano.

Inoltre, capita spesso che l'utilizzo di diversi plugin e componenti (specialmente su cms) generi degli errori sul codice. A volte dovuti a scelte obbligate di tipo tecnico da parte degli sviluppatori che magari danno priorità a particolari aspetti a discapito di qualche errore "minore" sul codice. A volte perché tali componenti sono realizzati con i piedi (in tal caso sarebbe meglio evitare di usarli). A volte (più spesso) per delle impostazione non corrette da parte di chi li installa, e in tal caso gli errori potrebbero essere evitati o corretti in qualche modo.

A parte questo potresti comunque cercare di correggere il correggibile. Non dico che sia semplice ma puoi passare in rassegna, uno ad uno, tutti gli errori segnalati dal validatore, quindi, con opportune ricerche, provare a capire di cosa si tratta, e nel caso, provvedere a sistemare.

Poi, là dove non riesci a risolvere, come ultima risorsa puoi chiedere aiuto sul forum.
...

Volevo eliminare quella riga vuota che c'era subito dopo la riga contenente la data ecc...e ce l'ho fatta ma si è disattivato l'effetto transizione...
Questo il codice...che cavolata ho combinato? :-)

... provo a dargli uno sguardo

[KillerWorm]

Volevo eliminare quella riga vuota che c'era subito dopo la riga contenente la data ecc...e ce l'ho fatta ma si è disattivato l'effetto transizione...
Questo il codice...che cavolata ho combinato? :-)

Sai quando ti ho scritto:

quello che chiedi non è così scontato o semplice come potrebbe sembrare.

Era quello che intendevo dopo che ho provato ad utilizzare la proprietà display più o meno come hai provato a fare tu
Chiaramente display non ha un valore numerico per cui ottenere una variazione da un punto ad un altro. Oltretutto il "display:none" fa sfasciare il layout della tabella (prendilo per buono, non entro nel discorso tecnico).

La strada da prendere, a mio parere, è un'altra.
Lo spazio che rimane sulla riga è dovuto al padding dentro le celle (td). Bisognerebbe agire in qualche modo su quello per azzerarlo quando si chiude la riga.

Nel caso puoi fare qualche altra prova in questo senso.
Faccio qualche prova anche io ma non ti garantisco niente.

[osborn87]

Sai quando ti ho scritto:
Era quello che intendevo dopo che ho provato ad utilizzare la proprietà display più o meno come hai provato a fare tu
Chiaramente display non ha un valore numerico per cui ottenere una variazione da un punto ad un altro. Oltretutto il "display:none" fa sfasciare il layout della tabella (prendilo per buono, non entro nel discorso tecnico).

La strada da prendere, a mio parere, è un'altra.
Lo spazio che rimane sulla riga è dovuto al padding dentro le celle (td). Bisognerebbe agire in qualche modo su quello per azzerarlo quando si chiude la riga.

Nel caso puoi fare qualche altra prova in questo senso.
Faccio qualche prova anche io ma non ti garantisco niente.

Ciao, ho provato a modificare il padding delle celle td ma, oltre ad appiccicare il testo alla tabella, la seconda riga (pur assottigliandosi) non se ne va! (ma farlo come dicevi all'inizio con javascript/jquery è un casino?

Per quanto riguarda lo slide di testo ho trovato questo codice:

$(document).ready(function(){    fixFlexsliderHeight();
});

$(window).load(function() {
    fixFlexsliderHeight();
});

$(window).resize(function() {
    fixFlexsliderHeight();
});

function fixFlexsliderHeight() {
    // Set fixed height based on the tallest slide
    $('.flexslider').each(function(){
        var sliderHeight = 0;
        $(this).find('.slides > li').each(function(){
            slideHeight = $(this).height();
            if (sliderHeight < slideHeight) {
                sliderHeight = slideHeight;
            }
        });
        $(this).find('ul.slides').css({'height' : sliderHeight});
    }); }

Però non saprei dove inserirlo e come...

[KillerWorm]

ma farlo come dicevi all'inizio con javascript/jquery è un casino?

Ciao, ho provato e risulta forse più complicato che risolverlo con css. In genere con jQuery si può usare qualche show() hide() ma in questo caso, quando avviene l'animazione, gli elementi della tabella (che sono di tipo table-qualchecosa) subiscono una momentanea trasformazione in elementi di blocco, il che va a creare problemi collaterali nella visualizzazione.

Ad ogni modo ho fatto qualche altra prova con css e sembra si riesca a risolvere (sostituisci ciò che hai messo prima, con questo codice così com'è):

.gigpress-table tr.gigpress-info{
  background: #b3e7dd;
  -webkit-transition: line-height .5s;
     -moz-transition: line-height .5s;
          transition: line-height .5s;
  line-height: 0%;
}
.gigpress-table tr.gigpress-info>td{
  overflow:hidden;
  -webkit-transition: opacity .5s, padding-top .5s, padding-bottom .5s;
     -moz-transition: opacity .5s, padding-top .5s, padding-bottom .5s;
          transition: opacity .5s, padding-top .5s, padding-bottom .5s;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.gigpress-table tr.gigpress-info:hover, .gigpress-table tr.gigpress-row:hover~tr.gigpress-info{
  line-height: 130%;
}
.gigpress-table tr.gigpress-info:hover>td, .gigpress-table tr.gigpress-row:hover~tr.gigpress-info>td{
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
}
.gigpress-table tr.gigpress-info>td *{
  height:0;
  margin:0;
}

Ho fatto delle prove direttamente sulla pagina del tuo sito, tramite la console-web, e mi pare funzioni.
Tieni presente alcune cose però, dentro le celle della tua tabella ci sono dei contenuti che impediscono il completo azzeramento della riga. Alcuni elementi comportano anche degli errori di validazione (ho notato dei tag <p>, peraltro inutili, all'interno di <span>). Questo potrebbe generare dei problemi di visualizzazione inaspettati (vedi il discorso sulla validazione).
Ad ogni modo, ho inserito le ultime regole proprio per azzerare tutto ciò che si può azzerare all'interno delle celle, così da permettere la riduzione completa delle righe (è chiaro che questo può comportare il rischio di azzerare altri contenuti che magari non vanno azzerati). Sarebbe quindi opportuno assicurarsi di ripulire al meglio i contenuti che stanno nelle celle, anche i link sulla prima colonna (con le funzioni per aggiungere al calendario, ecc.) che probabilmente non vuoi visualizzare (da quel che mi pare di capire) ma che sono comunque presenti inutilmente. Questo resta comunque un discorso a parte.

Per ora puoi provare così. Fammi sapere.

Per quanto riguarda lo slide di testo ho trovato questo codice:

Si potrebbe mettere in un tag <script> direttamente nell'head della tua pagina.
Gli do comunque uno sguardo.

[osborn87]

Ti ringrazio davvero di cuore! Funziona esattamente come me lo ero immaginato!

I <p> all'interno degli <span> credo siano dovuti al fatto che quando inserisco un nuovo evento nel campo informazioni inserisco questo:

<p></p><b>Programma:</b><br>
L. Boccherini - Quartetto op.2 n.6<br>
W. A. Mozart - Quartetto K156 in sol maggiore<br>
J. Haydn - Quartetto in mi bemolle maggiore op.33 n.2 “the joke”

Era per scrivere così:


Orario: 21:00

Programma:


L. Boccherini - Quartetto op.2 n.6<br>
W. A. Mozart - Quartetto K156 in sol maggiore<br>
J. Haydn - Quartetto in mi bemolle maggiore op.33 n.2 “the joke”


Ma ora non si vede più così...cosa consigli?

[KillerWorm]

Ti ringrazio davvero di cuore! Funziona esattamente come me lo ero immaginato!

Bene

I <p> all'interno degli <span> credo siano dovuti al fatto che quando inserisco un nuovo evento nel campo informazioni inserisco questo:

Chiaro ma probabilmente il contenuto viene "avvolto" in automatico da uno span e questo comporta appunto degli errori di validazione.
Se il problema è "mandare a capo" o creare delle linee vuote, allora puoi usare dei semplici <br>.

Ad esempio:

Orario: 21:00<br>
<br>
<br>
Programma:<br>
<br>
L. Boccherini - Quartetto op.2 n.6<br>
W. A. Mozart - Quartetto K156 in sol maggiore<br>
J. Haydn - Quartetto in mi bemolle maggiore op.33 n.2 “the joke”

Un consiglio: preciso che non so se sia il tuo caso ma di solito utilizzando degli editor di testo di tipo WYSIWYG sui cms, ad esempio se stai inserendo il contenuto attraverso il pannello di controllo di quel plugin, è possibile che premendo normalmente "Invio" (da tastiera) venga iniziato/inserito in automatico, e a seconda di come l'editor interpreta il ritorno-a-capo in quel determinato contesto, un nuovo paragrafo (cioè un elemento <p>) e non una semplice nuova linea (cioè <br>).
Però è usata generalmente una convenzione. Premendo Shift+Invio (anziché solo Invio) viene forzato il tipo di ritorno-a-capo come nuova linea dello stesso paragrafo (cioè un semplice <br>).