Discussion :

[MInfo25]

Bonjour
J'aimerais mettre un lien "Lire la suite..." dans le champ "Description" des membres de mon site.
J'ai cette fonction qui renvoie la description mais elle est trop longue.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!-- membre desc-->
			<div class="membre-description">
 
			<?php the_hrb_user_bio( $user ); ?>
			</div>

Comment spécifier que cette fonction va afficher par exemple 300 caractère ensuite mettre le lien "Lire la suite...". Et lorsqu'on clique sur le lien "Lire la suite...", toute la description se déroule sur la même page et non sur une autre page.

Quelqu'un ici pourrait-il m'aider svp ?

[Invité]

Bonjour,

à voir :

• Fonctions de troncature de texte

[Celira]

Petite subtilité : les fonctions de troncatures vont (comme le nom l'indique) tronquer le texte. Il faudra donc que ton lien "Voir la suite" recharge le texte complet, soit par un appel Ajax, soit en rechargeant la page.

[Invité]

Bonjour,

...Il faudra donc que ton lien "Voir la suite" recharge le texte complet, soit par un appel Ajax, soit en rechargeant la page...

OU, chère Celira , (autre solution sans Ajax ni rechargement) en affichant/masquant 2 <div> :

• l'une contenant le résumé,
• l'autre le contenu complet

Voici encore une AUTRE solution : http://codepen.io/jreaux62/pen/WwgGWE
(CSS/JavasScript, sans PHP !)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="resume1" class="resume">
<p>
Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
  </p><p>
Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus.
  </p><p>
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
  </p><p>
Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.
  </p><p>
Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis conloquiis et nocturnis qua vi, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet confidentia, acciri mollioribus scriptis per simulationem tractatus publici nimis urgentis eundem placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.
  </p>
</div>
<a id="abt1" class="abt" onclick="affichefull(this.id,'resume1');return false;" href="#">Voir la suite</a>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.resume { width:300px; height:195px; /*on impose des dimensions */
  overflow: hidden; /* on masque ce qui dépasse */
  text-overflow: ellipsis;
}
.abt { color:#666; }

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function affichefull(id_bt, id_resume)
{
  var bt = document.getElementById(id_bt);
  var resume = document.getElementById(id_resume);
  if(resume.style.height!='auto'){
    resume.style.height = 'auto';
    bt.innerHTML = 'Masquer';
  } else {
    resume.style.height = '195px';
    bt.innerHTML = 'Voir la suite';
  }
}

[Celira]

OU, chère Celira , (autre solution sans Ajax ni rechargement) en affichant/masquant 2 <div> :

• l'une contenant le résumé,
• l'autre le contenu complet

Effectivement, j'ai considéré que le but était de limiter les données transmises à la page et non une considération de mise en page.