0

I'm trying to have each span element containing a quote to change font-size according to character count. There can be many quotes per page.

I have a jQuery doing the resizing, but since ":nth-of-type" does not apply to classes, the jQuery displays both quotes according to the character amount of the last quote only. I wonder how I can differentiate both quotes without using ids.

Here's a jfiddle :

<script async src="http://jsfiddle.net/z7du5/24/"></script>

http://jsfiddle.net/z7du5/24/

$(function() {

    var $quote = $(".category-motivation .inspi_legende");
    
    var $numWords = $quote.text().trim().length;
    
    if (($numWords >= 1) && ($numWords < 100)) {
        $quote.css("font-size", "100px");
    }
    else if (($numWords >= 100) && ($numWords < 200)) {
        $quote.css("font-size", "40px");
    }
    else if (($numWords >= 200) && ($numWords < 300)) {
        $quote.css("font-size", "30px");
    }
    else if (($numWords >= 300) && ($numWords < 400)) {
        $quote.css("font-size", "20px");
    }
    else {
        $quote.css("font-size", "10px");
    }    
 
});
.inspi {
    width: 100%;
    display: block;
    margin: 10px 10px 20px 10px;
    background: brown;
}
.inspi_legende {
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    color: white;
    cursor: default;
    display:block;
}
.inspi_source {
    font-size: 16px;
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="middle">
  <div class="type-post">
    <div>
      <h2>Title 1</h2>
    </div>
    <div class="text">
      Text 1.
      <span class="inspi">
        <span class="inspi_legende">A quote that doesn't need to be resized for some good reason.
        </span>
      </span>
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 2</h2>
    </div>    
    <div class="text">
      Text 2.
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 3</h2>
    </div>    
    <div class="text">
      Text 3.
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 4</h2>
    </div>    
    <div class="text">
      Text 4.
    </div>
  </div>

  <div class="type-post category-motivation">
    <div>
      <h2>Title 5</h2>
    </div>    
    <div class="text">
      Text 5. Here is a quote which has a various amont of characters (the char. count includes the .inspi_source span on purpose) :
      <span class="inspi">
        <span class="inspi_legende">I am a duck.
          <span class="inspi_source">Donald Duck</span>
        </span>
      </span>
    </div>
  </div>
  <div class="type-post">
    <div>
      <h2>Title 6</h2>
    </div>    
    <div class="text">
      Text 6.
    </div>
  </div>
  <div class="type-post category-motivation">
    <div>
      <h2>Title 7</h2>
    </div>    
    <div class="text">
      Text 7. Here is another quote which is potentially longer or shorter than the first one :
      <span class="inspi">
        <span class="inspi_legende">I must admit I'm less a duck than some other inspirational thinkers over here.
          <span class="inspi_source">Herbert Marcuse</span>
        </span>
      </span>
    </div>
  </div>
</td>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Arntjine
  • 85
  • 9

1 Answers1

2

You need to use the .each jQuery function to loop over each quote. I modified the code from your Fiddle as follows (untested):

$(function() {
    // Find all the quotes on the page and loop over them with .each
    $(".category-motivation .inspi_legende").each(function() {
        var $quote = $(this);   // with .each, "this" holds each holds the current item

        var $numWords = $quote.text().trim().length;  // Should be numChars?

        if (($numWords >= 1) && ($numWords < 100)) {
            $quote.css("font-size", "100px");
        }
        else if ($numWords < 200) {
            $quote.css("font-size", "40px");
        }
        else if ($numWords < 300) {
            $quote.css("font-size", "30px");
        }
        else if ($numWords < 400) {
           $quote.css("font-size", "20px");
        } 
        else {
           $quote.css("font-size", "10px");
        }    
    });   // end of .each loop
});
bmode
  • 760
  • 6
  • 9
  • Thanks. This is very much what I was miserably trying to achieve ! – Arntjine Sep 21 '17 at 16:48
  • If it answers the question, don't forget to hit the grey checkmark to the left of the answer. It lets people know that you have found your answer. If you found it useful, you can click the upvote triangle as well. – Jonathan Sep 21 '17 at 16:52
  • @Arntjine Glad this helped! Could you mark this as the accepted answer when you get a chance? Thanks! – bmode Sep 21 '17 at 20:04
  • Done. Thanks again ! – Arntjine Sep 21 '17 at 21:25