javascript - jQuery - Scale font-size to fill parent div height -

i have 2 50% width divs inside parent div. scale font-size fill height of parent div when window resized.

<div class="wrapper"> <div class="text">     <div class="left-text text-fill">     <span>paragraph of text</span>     </div>     <div class="right-text text-fill">     <span>paragraph of text</span>     </div> </div> </div> 

jquery solution found

function textfill(options) {     var fontsize = options.maxfontpixels;     var t = $("span:first", this);     var maxheight= $(this).height();     console.log(maxheight);     var textheight;     {         t.css({'font-size': fontsize});         textheight = t.height();         fontsize = fontsize - 1;     } while (textheight > maxheight);     return this; } $(".textfill").each(textfill({maxfontpixels: 500})); 

the problem have this referring outer wrapper div isn't finding span. why isn't this referring <div class="text-fill"> context of function call? , how go fixing referring div , child span?

let me know if need more code or clarification.

i solved it! ended having pass this parameter function understood context was.

$(".text-fill").each(function() {textfill(this, {maxfontpixels: 100})}); function textfill(that, options) {     var fontsize = options.maxfontpixels;     var t = $("span:first", that);     var maxheight= $(that).height();     var textheight;     {         t.css({'font-size': fontsize});         textheight = t.height();         fontsize = fontsize - 1;     } while (textheight > maxheight); }