slideshow of divs and update font size for ANY div

Question

I have a slideshow of divs. I would like to change the font size so that the text div stays inside the div #column2. (PS #column2 has a fixed height in CSS)

The following script only checks the first li , but not the others. How could I change it so that it checks condition for every li. Thanks!

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

I've added a little bit of logic which will execute every single time the setInterval function runs.This logic will retrieve the comment and check the length of the comment.If the length is greater than 12 the font-size is reduced.Obviously you can change this value to whatever you require:

<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>

Just a thought:

You can use substring to make the comment shorter if it's bigger than X and set the tooltip(when the user hovers over the comment) to be the full length comment.That way you don't run the risk of making your comment font so little that users can't actually read it.

Just replace this line:

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

With this:

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

Answer 2

You could get the parent element reference first and then count the number of child elements with ParentNode.childElementCount and then iterate your check condition for the number of child that you have.