Comment limiter le nombre de caractères du chapo à l'affichage ?

Réponses

• zakar! Member

  février 2013

  Bonsoir,
  
  Dans le header de ton thème rajoute ceci:

  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script>
  $(function () { 
      var maxL = 50;  
      $('div.article-content').each(function (i, div) {
          
          var text = $(div).text();
          if(text.length > maxL) {
              
              var begin = text.substr(0, maxL),
                  end = text.substr(maxL);
  
              $(div).html(begin)
                  .append($('<a class="readmore"/>').attr('href', '#').html('<br />Lire la suite...'))
                  .append($('<div class="hidden" />').html(end));                           
          }     
      });           
      $(document).on('click', '.readmore', function () {
          $(this).next('.hidden').slideDown(750);
      })          
  })
  </script>
  <style type="text/css">
  .hidden { display: none; }
  .readmore { margin: 0 5px;cursor: pointer; color: red;}
  </style>
  

  
  Change la valeur de var maxL

  0
• Gzyg Member

  février 2013 février 2013 modifié

  Merci, ça fonctionne impeccablement.
  
  
  Sauf : le lien "Lire la suite" qui devrait se comporter normalement, à savoir : mener sur la page article.php.
  
  J'ai donc zappé la partie "on(click)" mais je ne sais pas quoi mettre dans le href... ?
  
  EDIT
  
  Provisoirement (?), je m'en tire avec ça :
  
  

  <script>
  	$(function () { 
  	    var maxL = 250;  
  	    $('article-content').each(function (i, div) {
  		
  		var text = $(div).text();
  		if(text.length > maxL) {
  		    
  		    var begin = text.substr(0, maxL),
  			end = text.substr(maxL);
  
  		    $(div).html(begin)
  			.append($('<span class="readmore"/>').attr('title', 'Cliquer sur le titre pour lire la suite.').html('...<br />Cliquer sur le titre pour lire la suite.&nbsp;&uarr;'))                          
  		}     
  	    });                    
  	})
  	</script>
  

  
  
  Merci,
  
  à plus,
  
  
  Gzyg

  0
• zakar! Member

  février 2013

  pour l'url :

  <?php $plxShow->artUrl() ?>
  

  0
• Gzyg Member

  février 2013

  Non, ça ne foncionne pas avec l'url de cette façon :
  1. ça donne la même url pour tous les articles : celle du dernier article (le plus récent).
  2. le chapo de ce dernier article ne s'affiche plus (??)...
  
  
  
  à plus,
  
  
  Gzy

  0
• zakar! Member

  février 2013 février 2013 modifié

  Tu as oublié le 'point' de ta class article-content.
  
  J'arrive tout de même à avoir le même 'bogue', pour cela faudrait avoir l'ID unique de l'article en home, sur les ancienne version il me semblait que c'était implanté, mais la je ne vois plus ou est cet ID.
  
  Dans le js aurait pus être comme ceci:

  <script>
  $(function () { 
      var maxL = 50;  
      $('#art-<?php $plxShow->artId(); ?>').each(function (i, div) {
          
          var text = $(div).text();
          if(text.length > maxL) {
              
              var begin = text.substr(0, maxL),
                  end = text.substr(maxL);
  
              $(div).html(begin)
                  .append($('<a class="readmore"/>').attr('href', '<?php $plxShow->artUrl() ?>').html('<br />Lire la suite...'))
                  .append($('<div class="hidden" />').html(end));                           
          }     
      });           
      $(document).on('click', '.readmore', function () {
          $(this).next('.hidden').slideDown(750);
      })          
  })
  </script>
  

  Et donc rajouter cet ID dans le template home.php

  id="art-<?php $plxShow->artId(); ?>"
  

  Donc si Stéphane voit ce sujet, ou est passé <?php $plxShow->artId(); ?> ?

  0
• Gzyg Member

  février 2013

  Oublié en recopiant mais il est présent sur ma page et comme tu as le même incident, je m'nqiuiète moins.
  
  En attendant qu'artId() revienne je garde ma solution provisoire.
  
  
  
  Merci,
  
  
  à plus,
  
  
  Gzyg

  0
• zakar! Member

  février 2013

  Ok bon alors le code 100% fonctionnel suite à l'oublie de l'echo
  Dans le header.php de ton thème rajoute:

  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <style type="text/css">
  .hidden { display: none; }
  .readmore { margin: 0 5px;cursor: pointer; color: red;}
  </style>
  

  Puis dans home.php, remplace:

  				<div  class="article-content">
  					<?php $plxShow->artChapo(); ?>
  				</div>			
  

  par:

  				<div id="art-<?php echo $plxShow->artId(); ?>" class="article-content">
  					<?php $plxShow->artChapo(); ?>
  				</div>	
  <script>
  $(function () { 
      var maxL = 50;  
      $('#art-<?php echo $plxShow->artId(); ?>').each(function (i, div) {
          
          var text = $(div).text();
          if(text.length > maxL) {
              
              var begin = text.substr(0, maxL),
                  end = text.substr(maxL);
  
              $(div).html(begin)
                  .append($('<a class="readmore"/>').attr('href', '<?php $plxShow->artUrl() ?>').html('<br />Lire la suite...'))
                  .append($('<div class="hidden" />').html(end));                           
          }     
      });           
      $(document).on('click', '.readmore', function () {
          $(this).next('.hidden').slideDown(750);
      })          
  })
  </script>				
  

  0
• Gzyg Member

  février 2013

  Impeccable. Encore merci.
  
  
  
  à plus,
  
  
  Gzyg

  0