Comprimere ed espandere il testo, si può?

**webfor** · 02-03-2010, 10:00

Buon giorno a tutti,

in un sito web di mia competenza vorrei migliorare un dettaglio e mi chiedo se si possa fare tramite CSS.
Si tratta di una pagina WordPress di "FAQ" che contiene, in alto, la lista delle domande; cliccandone una si viene portati alla risposta.
Concentriamoci sulla parte che contiene le domande, che è di questo tipo:

- Domanda 1: bla bla bla bla bla bla
ecc. ecc. ecc. ecc.
eoirewo jtopwei i op jceocvk wo
- Domanda 2: bla bla bla bla bla bla bla
eofpiweopfief owifewopfi
vmfopvvvmowvmwopvmwdovmwovpmvo
- Domanda 3: bla bla bla bla bla bla bla bla bla bl
efowekfopek ewofkewofkewofk
ecc. ecc. ecc.

Essendoci oltre 50 domanda, la pagina risulta molto estesa in senso verticale. Io vorrei che ogni domanda fosse costituita da 1 sola riga, e al passaggio del mouse questa si espandesse mostrando il testo della domanda. L'esempio diventerebbe:

- Domanda 1: bla bla bla bla bla bla
- Domanda 2: bla bla bla bla bla bla bla
- Domanda 3: bla bla bla bla bla bla bla bla bla bl

Se con il puntatore del mouse si va sulla riga della domanda uno la pagina diventa:

- Domanda 1: bla bla bla bla bla bla
ecc. ecc. ecc. ecc.
eoirewo jtopwei i op jceocvk wo
- Domanda 2: bla bla bla bla bla bla bla
- Domanda 3: bla bla bla bla bla bla bla bla bla bl

Stessa cosa per tutte le altre domande.

E' possibile farlo tramite CSS? Mi dareste una mano?

Grazie a tutti e un saluto.

**ldetomi** · 02-03-2010, 10:26

No, non puoi farlo tramite css, ti serve necessariamente JavaScript in modo da "catturare" l'evento al click del mouse (o al suo passaggio) e controllare così la visualizzazione della risposta.

Potresti farlo solo se la classe css che vuoi modificare fosse la stessa su cui passi col mouse. Ad esempio: se il div avesse una classe associata che mostra solo una parte del suo contenuto, potresti fare in modo con la psuedo-classe :hover di mostrare tutto il suo contenuto, ma ricorda che funziona solo in Firefox e altri browser, di sicuro non in IE6 e non mi ricordo se in IE7 e 8, questo perché IE6 riconosce :hover solo sui link.

**webfor** · 02-03-2010, 10:29

Ti ringrazio, lo sospettavo... :master:
Mi sapresti suggerire un frammento di codice a cui ispirarmi? O magari uno script già pronto?

Grazie ancora!

**ldetomi** · 02-03-2010, 10:31

Ne ho uno preparato proprio in questi giorni in JQuery, se ti va bene (ma devi includere la libreria) te lo posto nella pausa pranzo (scusami, al momento sono di fretta).

**webfor** · 02-03-2010, 10:37

Sei gentilissimo, grazie.
Dobbiamo sentirti in privato o lo posti qui?
Ci sentiamo comunque nel pomeriggio, non ho fretta...

Grazie ancora!

**fcaldera** · 02-03-2010, 10:43

se vuoi farlo al passaggio del mouse lo puoi fare anche in css
se vuoi anche al click usando :focus ma perdi la selezione non appena clicchi altrove nella pagina

**fcaldera** · 02-03-2010, 11:00

Originariamente inviato da fcaldera
se vuoi farlo al passaggio del mouse lo puoi fare anche in css
se vuoi anche al click usando :focus ma perdi la selezione non appena clicchi altrove nella pagina

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        #questions {
            width       : 250px;
            margin      : 0;
            padding     : 10px;
            border      : 1px solid #e2e2e2;
        }
        
        #questions li {
            display         : block;
            margin-bottom   : 10px;
        }
        
        #questions li span {
            display     : none;
        }
        
         #questions li a {
            text-decoration : none;
            color           : #767688;
            position        : relative;
            z-index         : 1;            
         }
        
        #questions li a:hover,
        #questions li a:focus {
            direction   : ltr;
            z-index     : 2;
            top         : -5px;
            left        : -5px;
            color       : #434343;
            padding     : 4px 0 0 4px;
            display     : block;
            border      : 1px #ccc solid;
            background  : #ffd;
        }
        
        #questions li a:hover span,
        #questions li a:focus span {
            display     : block;
        }
        </style>
        
    </head>

<body>

    
    
    
            <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            <span>Nam a odio vel dolor vulputate sagittis. Mauris tempus, 
            mi enim volutpat orci, eget pulvinar dolor elit eu metus. 
            Nam velit sapien, pharetra quis eleifend quis, auctor vel felis?</span>
        

            <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            <span>Nam a odio vel dolor vulputate sagittis. Mauris tempus, 
            mi enim volutpat orci, eget pulvinar dolor elit eu metus. 
            Nam velit sapien, pharetra quis eleifend quis, auctor vel felis?</span>
        
   

</body>
</html>

ciao

**webfor** · 02-03-2010, 12:43

Ti ringrazio!
Però non sono riuscito ad ottenere quanto voluto. Provo a postarti il file .php che genera le risposte:

<?php if (!defined ('ABSPATH')) die ('Not allowed'); ?><?php if (!empty ($questions)) :?>

<?php foreach ($questions AS $pos => $question) : ?>
<?php echo $question->question; ?>

<?php endforeach; ?>

<?php else : ?>

<?php _e ('There are no questions!', 'faqtastic'); ?></p>
<?php endif; ?>

La relativa classe, nel foglio di stile, è fatta così:

.faq h3
{
font-size: 1em;
font-weight: bold;
margin: 0;
}

.faq h3 a
{
display: block;
}

.faq li
{
padding: 0px 5px 0px 5px;
padding-left: 3px !important;
clear: both;
}

.faq .alt
{
background-color: #f5f5f5;
padding-top: 4px;
}

.faq_approve
{
font-size: 0.8em;
float: right;
padding: 3px 3px 0px 3px;
text-align: center;
margin-top: -3px;
color: #999;
}

.faq_approve img
{
margin-top: 4px;
}

.faq_approve p
{
display: inline;
padding: 0; margin: 0;
}

.faq p:last-child
{
margin-bottom: 4px;
}

.faq .author
{
float: right;
padding-bottom: 5px;
font-size: 0.9em;
}

Se hai una idea su come procedere, te ne sono grato.
Applicando il codice che mi hai dato, tutte le domande vengono pubblicate in grigio, il link non viene più evidenziato con alcun colore al passaggio del mouse e, in ogni caso, il testo rimane tutto visibile.
Io invece vorrei che si vedesse solo la prima riga di ogni domanda.

Grazie, veramente!

**fcaldera** · 02-03-2010, 12:59

posta l'html che arriva al browser, non il php
meglio se posti direttamente un link per vedere

**webfor** · 02-03-2010, 13:02

In effetti...
E' tutto qui, grazie: http://www.immaginazionecreativa.it/...e/altredomande

Discussione: Comprimere ed espandere il testo, si può?

Strumenti discussione

Ricerca discussione

Visualizza

Comprimere ed espandere il testo, si può?

Permessi di invio