INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Anteprima di un testo lungo con Javascript e link "continua"

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Mi è capitato recentemente di aver bisogno, per questioni più che altro estetiche, di troncare un testo molto lungo e visualizzare l'anteprima dello stesso, composta da un certo numero di caratteri che occupasse solo tre righe nello spazio in cui andava visualizzato.

Non era il caso in cui troncare lato server il testo per rimandare al click sul link "continua" ad un'altra pagina, dato che era mia intenzione, a fini dell'indicizzazione, di avere il testo completo nella stessa pagina.

Allo scopo non rimaneva che inventare un sistema lato client ed ho utilizzato Javascript che, con pochissime righe di codice, mi ha dato il risultato che desideravo!

Ecco come... partendo dal codice HTML:

<div id="anteprima">Questa è la frase completa che, in fase di anteprima, verrà mostrata troncata con i "puntini" ed il link da cliccare per continuare a leggere!</div>

Ho racchiuso il "testo molto lungo" in un elemento HTML identificabile attraverso un ID. Caso specifico, per l'esempio, "anteprima".

Segue il codice Javascript, he va inserito dopo il codice HTML:

<script type="text/javascript">
var salva = document.getElementById("anteprima").innerHTML;
document.getElementById("anteprima").innerHTML = salva.substring(0, 50) + "..." + " (<a href='javascript:continua()'>continua</a>)";
function continua()
{
    document.getElementById("anteprima").innerHTML = salva;
}
</script>

Il funzionamento è semplice: ho innanzitutto salvato in una variabile l'intero contenuto del "testo molto lungo", quindi ho effettuato un substring del testo appena salvato in una variabile di appoggio, mostrando solo un certo numero di caratteri (nell'esempio 50), i puntini ed i link che attiva la funzione continua() che provvede a stampare a video il testo completo, senza puntini e senza link per continuare a leggere.

IN EVIDENZA