11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai une liste dont chaque élément li contient 2 divs à l'intérieur d'un div "main" :
- div "main" a une longueur fixes (disons 200px),
- div "part1" a une longueur variables (celle du texte et images qu'il contient)
=> J'aimerais que le texte affiché dans div "part2" ait pour longueur celle de div "main" moins div "part1"

...
<li>
   <div class="main">   
          <div class="part1">A</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
<li>
   <div class="main">   
          <div class="part1">ABC</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
<li>
   <div class="main">   
          <div class="part1">ABCDE</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
...

Qui devrait donner :

A BlaBla...
ABC BlaB...
ABCDE Bl...

J'ai tenté mais ça ne fonctionne pas:
$(function(){
  $(".part1").each(function(){
    var $this = $(this);
    var $len = 0;
    var $len = $this.outerWidth();
    var $lenParent =$this.parent().outerWidth();        
    var newText2 = $this.next('.part2').text().substring(0,$lenParent-$len); 
    $this.next('.part2').innerHtml(newText2+"...");
  });
});


PS: La solution CSS avec text-overflow: ellipsis; semble parfaite mais puisque non compatible avec tout les navigateurs je me rabats sur le JS
Modifié par Tchernobyl (11 Aug 2012 - 02:04)
Salut,

ton code est plutot bon, remplace l'appel a la method innerHtml() par un un appel a la methode text().

Ensuite cote CSS il faut que tes div ".part1" ne soit pas en display:block car sinon ils prennent la longueur de la div parent par defaut, et la difference de largeur sera de 0. Un display "inline" ou "inline-block" devrait faire l'affaire. Ou leur appliquer la propriete float "left" ou "right" aussi. Cela depend de ce a quoi tu veux parvenir graphiquement parlant apres.
Modifié par martint (13 Aug 2012 - 14:56)