[JS] Anteprima testo

Salve a tutti!

Allora, ho un esigenza "particolare", sono sicuro che con JS si può fare, ma purtroppo, non so come XD.

Ho una query in PHP che preleva dal DB porzioni di testo parecchio lunghe e le stampa a schermo diverse volte all'interno della stessa pagina, ho bisogno di fare in modo che queste porzioni di testo vengano troncate dopo un tot di caratteri e che alla pressione di un pulsante, o meglio, un link testuale, vengano visualizzate per intero. Come posso fare?

Grazie a tutti della risposta

Una cosa tipo questa?

<script>
function allarga()
{
  var spans = document.getElementsByTagName('span');
  for(var i=0;i<spans.length;i++)
  {
    spans[i].innerHTML = spans[i].getAttribute('attr');
  }
}
</script>
<a href="#" onclick="allarga();">Allarga</a>
<span attr="eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee">eee...</span>
<span attr="ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff">fff...</span>

Ovviamente le span sarebbero il risultato della query.

Che attributo è attr? Comunque leggendo così su due piedi, no, non credo sia così...

Ora faccio una soluzione che mi è venuta in mente usando un misto di PHP e JS e poi ve la posto e mi dite se si può semplificare un po'.

Come promesso, ecco come ho risolto in maniera, secondo me, barbina.

Funzioni usate:

function gdrcd_short_descr($stringa, $max_char)
{
    if(strlen($stringa)>$max_char){
            $stringa_tagliata=substr($stringa, 0,$max_char);
            $last_space=strrpos($stringa_tagliata," ");
            $stringa_ok=substr($stringa_tagliata, 0,$last_space);
            return $stringa_ok;
    } else {
            return $stringa;
    }
} 

function descr(h,s)
{
	var div1=document.getElementById(h);
	var div2=document.getElementById(s);
	
	div1.style.display='none';
	div2.style.display='inherit';

}

Codice della pagina:

<div class="inventario_riga_descrizione">
<div style="display: inherit" id="<?php echo $row['id_oggetto']?>short">
<?php echo gdrcd_short_descr((gdrcd_filter('out', $row['descrizione'])), 500); ?>... <a href="#"  onClick="javascript:descr('<?php echo $row['id_oggetto']?>short','<?php echo $row['id_oggetto']?>long');">[Leggi Tutto]</a>
</div>
<div style="display: none;" id="<?php echo $row['id_oggetto']?>long">
<?php echo $row['descrizione']; ?>
<p style="text-align: center;"><a href="#"  onClick="javascript:descr('<?php echo $row['id_oggetto']?>long','<?php echo $row['id_oggetto']?>short');">[Nascondi]</a></p>
</div>
</div>

Se c'è qualcosa di non chiaro, ditemelo. Il valore da troncare, come potete vedere è $row['descrizione'].

[Kevinoo]

Ciao,
una soluzione potrebbe essere che con il php scrivi questo tipo di codice:

<div data-shorttext=" testo breve " data-longtext=" testo lungo " data-texttype="long" onclick="toggle_text( $(this) )"> Prova prov.... </div> 

Questo il codice della funzione javascript (per praticità jQuery)

  function toggle_text(el){
   var texttype = $(el).attr('data-texttype');
   var text = $(el).attr('data-'+ texttype +'text');
   $(el).html( text ).attr('data-texttype', ( (texttype == 'short') ? 'long' : 'short') );
  }

Ciao!!!

Anche l'attributo DATA mi giunge nuovo. Comunque jquery preferirei non usarlo. Altre idee? Quello che ho fatto io e postato sopra funziona perfettamente ma mi pare barbina come soluzione, poco performante. Qualcuno ha soluzioni migliori?

Ok, diciamo che avevi detto

alla pressione di un pulsante, o meglio, un link testuale, vengano visualizzate per intero

e non hai mai accennato al doverle visualizzare di nuovo accorciate, per quello ti ho fatto quello script (sono orgxiiipu), quindi dovresti spiegarti meglio se vuoi che ti aiutino.

Che attributo è attr? [...] Anche l'attributo DATA mi giunge nuovo.

Anche qui, è ovvio che non esistano (basta andare a vedere i tag HTML e i loro attributi), ma è palese che servino solo per essere recuperati con JS:

spans[i].innerHTML = spans[i].getAttribute('attr');

var texttype = $(el).attr('data-texttype');

Inoltre, Kevinoo ti ha dato una soluzione migliore della tua (che è abbastanza brutta, perché usi div nascoste, il che aumenta il tempo di caricamento della pagina, ecc.), ma se non vuoi usare JQuery (e anche questo avresti dovuto specificarlo nel tuo primo post), ti basta convertire il suo codice in puro JS (che è abbastanza semplice da fare, una volta capito cosa fa), invece di chiedere agli altri di farti fare tutto, non credi?
Senza contare che Kevinoo ha detto

Questo il codice della funzione javascript (per praticità jQuery)

Intendendo appunto che è la stessa cosa di JS, ma fatto con JQuery ha dovuto scrivere solo tre righe per fare la stessa cosa.
Quindi cerca di essere un po' più cortese con quelli che aiutano qui, poiché non ci pagano per farlo, vi aiutiamo solo perché possiamo.

[Kevinoo]

Prima di tutto devo ringraziare giochidicartenc per le sue parole :)

Intendendo appunto che è la stessa cosa di JS, ma fatto con JQuery ha dovuto scrivere solo tre righe per fare la stessa cosa.

Tornando a questo caso io, come ribadito da giochidicartenc, ti ho proprosto un'alternativa alla tua soluzione.

Anche l'attributo DATA mi giunge nuovo

Rigurando a cosa siano gli attributi DATA c'è un'amico comune, chiamato Google, impazziente di darti una mano

Ciao!

Avevo scritto un romanzo di risposta, ma l'aggiornamento sessione di altruista me l'ha fatta perdere, quindi sintetizzo.

Kevinoo, uso xHTML1.1, non HTML5, quindi non posso usare data* .
orgxiipuu non ho capito la tua deliberata aggressione, velata o meno, nei miei confronti, quindi datti una calmata che non sono stato scortese nei confronti di nessuno. Ho fornito le informazioni che ritenevo utili, tra qui lo scripta temporaneo che ho adottato, colpa mia che né ho omesso alcune, ma questo non ti autorizza ad alzarti così nei miei confronti.

Detto questo, arrivederci e grazie.