javascript - Function doesn't fire on load, but works on resize -

so working on function resizes font size text fills of container possible across multiple lines without overflow. instance,

i want text cover of 1200px of area within div without overflowing possible. script on resize not on load.

$(document).ready(textfill);  $(window).resize(textfill);    function textfill() {    $(".textfill").each(function() {      var        $text = $(this),        $parent = $text.parent();        var        textw = $text.width(),        texth = $text.height(),        parentw = $parent.width(),        parenth = $parent.height(),        ratio = (parentw + parenth) / (textw + texth);        var        originalsize = parsefloat($text.css('font-size')),        newsize = originalsize * (.9 * ratio);        $text.css("font-size", newsize);      });  }

#container {    width: 400px;    height: 300px;    border: 1px solid blue;  }  .textfill {    display: inline;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container">    <h1 class="textfill">make fit large possible.</h1>  </div>

when resize, fills container, onload not seem fire.

edit: function fire upon document ready, not account loaded dimensions of parent. instead measures parents height height of text.

additionally, not sure if resize event 1 i'd use, since should adjust font size, maybe should execute on change of parent dimensions, possible?

here fiddle..

your function in fiddle runs first time, can see if specify font-size .textfill.. 10px. you'll see scale max width on first call.

the main problem re-read font-size (originalsize) on every resize event (every time function called) , calculate again new size. after max reached have result expected.

the problem has been dealt before , because don't deserve credit answer, i'll link here. make sure check out gist included in answer!