![]() |
|
Homepage |
Javascript |
Anteprima di un testo lungo con Javascript e link "continua" | |
Anteprima di un testo lungo con Javascript e link "continua"
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
Una slidegallery con jQuery
Pagamenti online con PayPal e PHP
Riavviare IIS
Guadagna col tuo sito grazie a TradeD...
Guida XHTML
Errore 80004005: Cannot update. Datab...
Generare password casuali in Javascri...
Riscrivere le URL con Asp
Effetto ombra su testo con Photoshop
Referenze dei Tag Html
Introduzione ad Ajax ed Asp con Jscri...
HTTP 500 internal server error
Stringhe di connessione via ODBC e Ol...
Breve guida a jQuery
Referenze dei fogli di stile Css
Le espressioni regolari in Javascript
|
||||
© 2001/2013 lukeonweb.net - A cura di Luca Ruggiero, Partita IVA 05564851219 -
Privacy |
Pubblicità |
Contatti
| |||||