Diashow von divs und Update Schriftgröße für alle div

Question

Ich habe eine Diashow von divs. Ich möchte die Schriftgröße ändern, so dass der Text div innerhalb der Spalte div # column2 bleibt. (PS # column2 hat eine feste Höhe in CSS)

Das folgende Skript überprüft nur die erste li, aber nicht die anderen. Wie könnte ich es ändern, so dass es die Bedingung für jeden li überprüft. Vielen Dank!

HTML

<div class="slide"> 
    <li> 
    <div id="container"> 
     <div id="column1"> 
     <img src="img1.jpg" /> 
     </div> 

     <div id="column2"> 
     <div> 
      <span class="comment">Short text</span> 
      <span class="name">MyName</span> 
     </div> 
     </div> 

    </div> 

    </li> 

    <li> 
    <div id="container"> 
     <div id="column1"> 
     <img src="img1.jpg" /> 
     </div> 

     <div id="column2"> 
     <div> 
      <span class="comment">Long text</span> 
      <span class="name">MyName</span> 
     </div> 
     </div> 
    </div> 
    </li> 
    <li> 
    <div id="container"> 
     <div id="column1"> 
     <img src="img1.jpg" /> 
     </div> 

     <div id="column2"> 
     <div> 
      <span class="comment">Very Long text</span> 
      <span class="name">MyName</span> 
     </div> 
     </div> 
    </div> 
    </li> 
</div> 

JAVASCRIPT

<script> 

    $(function() { 

      //adjust font 
       while($('.slide #column2 div').height() > $('.slide #column2').height()) {//check condition 
        $('.slide #column2').css('font-size', (parseInt($('.slide #column2').css('font-size')) - 1) + "px");//change fot size 
       } 


     //slideshow 
      $('.slide li').hide(); // hide all slides 
        $('.slide li:first-child').show(); // show first slide 
        setInterval(function() { 
         $('.slide li:first-child').fadeOut(500, function() { 
           $(this).next('li').fadeIn(1000).end().appendTo('.slide') });    
        }, 5000); // slide duration    
     });  
</script> 

Answer 1

Ich habe ein wenig Logik hinzugefügt, die jedes Mal ausgeführt wird, wenn die setInterval-Funktion ausgeführt wird. Diese Logik wird den Kommentar abrufen und die Länge des Kommentars überprüfen.Wenn die Länge größer als 12 ist, ist die Schriftgröße reduced.Obviously können Sie diesen Wert ändern, um alles, was Sie benötigen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 

     $('.slide li').hide(); 
     $('.slide li:first-child').show(); 

     setInterval(function() { 
      $('.slide li:first-child').fadeOut(500, function() { 

       var nextLi = $(this).next('li'); 
       var comment = $(nextLi).find(".comment"); 

       var commentLength = $(comment).text().length; 

       if (commentLength > 12) { 
        alert('The coming comment is more than 12 characters long -> reduce font size'); 
        $(comment).css('font-size', '6px'); 
       } 

       $(this).next('li').fadeIn(1000).end().appendTo('.slide') 

      }); 
     }, 5000); // slide duration    
    }); 
</script> 

Nur ein Gedanke:

Sie können substring verwenden Kommentar kürzer zu machen, wenn es als X größer ist und stellen Sie den Tooltip (wenn der Benutzer schwebt über den Kommentar) um das zu sein Kommentar in voller Länge. Auf diese Weise riskieren Sie nicht, dass Ihre Kommentarschrift so klein wird, dass Benutzer sie nicht lesen können.

Ersetzen Sie einfach die folgende Zeile:

$(comment).css('font-size', '6px'); 

mit diesem:

var text = $(comment).text().substring(0, 9); 
text = text + "..."; 
$(comment).attr('title', $(comment).text()); 
$(comment).text(text); 

Answer 2

Sie könnten das übergeordnete Element Referenz zuerst und dann die Anzahl der untergeordneten Elemente mit ParentNode.childElementCount zählen und dann Prüfbedingung für die Anzahl der Kinderlaufen, dass du hast.