3

I am trying the following code but it is not working. Logically it should be alright, but can anyone tell me what I am missing here ? The goal is, font size of (h1) tag should adjust automatically according to the height of its parent.

Code Pen Link

HTML

<div class="product-title">
  <h1>Some Title which should not cross parent height and adjust font-size dynamically</h1>
</div>

CSS

.product-title{
     height: 200px;
     width: 200px;
 }

JS

    function adjustFontSize() {
        $('#h1').each(function() {
        var child = $(this);
        var parent = child.parent();

        child.css('font-size', '18'); //set max default font size
        while (child.height() > parent.height() && parseInt(child.css('font-size')) > 9) { //check div height condition
              child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px"); //decrease font size accordingly
        }
       });
      }
Saif Islam
  • 191
  • 1
  • 5
  • 17
  • instead of `$('#h1').each(...` it should be `$('h1').each(...` – Kartikeya Khosla Mar 25 '16 at 15:57
  • no luck..tried with that..doesn't work – Saif Islam Mar 25 '16 at 15:59
  • I think your problem is that the font-size is in ems. So when you evaluate the font size, it won't ever be larger than 9 because 9em is really big. You're never entering your loop as a result. I will post an answer with a solution. – mhodges Mar 25 '16 at 16:06
  • thanks mhodges, will highly appreciate if you can provide a concrete solution...i have found solutions for width problem such as FitText.js is a great plugin..but no idea whether there is a good solution for height problem..cheers..waiting for your solution man :) – Saif Islam Mar 25 '16 at 16:13

1 Answers1

2

Okay, there you go. This should be what you are looking for. Let me know if it does not work for you! 

$(window).load(function() {
  function adjustFontSize() {

    $('.product-title h1').each(function() {

      var child = $(this);
      var parent = child.parent();
      var fontSize = 3;
      child.css("font-size", fontSize + "em");
      while (child.height() > parent.height() && fontSize > .75) { //check div height condition
        fontSize -= .05;
        child.css('font-size', fontSize + "em"); //decrease font size accordingly
      }

    });

  }
  adjustFontSize();
});
mhodges
  • 10,938
  • 2
  • 28
  • 46
  • 1
    oh man..this works so perfect..wonderful solution...thank you so much for this concrete solution. I can apply your solution now in my live projects. cheers man... – Saif Islam Mar 25 '16 at 16:21
  • One thing to note is that if the parent shrinks and makes the text smaller, and then gets bigger again, your child.height() > parent.height() will be false so it will not resize the text back up. I have updated my solution to fix this minor issue – mhodges Mar 25 '16 at 16:26
  • 1
    thanks a lot once again man..now i have solution for child text overflowing both width and height of parent...great job..cheers – Saif Islam Mar 25 '16 at 16:43