resizeTitleTextFill.js

/**
 * Set font size so the text fits the width of the container
 */
function setupTitleTextFill(container, textElement) {
	// make element inline block and wrap a div so it still does a line break
	$(container + " "  + textElement).css("display","inline-block").wrap('<div class="title-text-fill-wrapper"></div>');
	resizeTitleTextFill(container, textElement);
	$(window).resize(function() {
		resizeTitleTextFill(container, textElement);
		
	});
}

function resizeTitleTextFill(container, textElement) {
	var maxFontSize = 80; //px
	var minFontSize = 25; //px
	$(container).each(function() {
		var $heading = $(this).find(textElement);
		$heading.css("font-size","10px");
		var maxWidth = $(this).width();
		var widthAt10px = $heading.width();
		var newFontSize = Math.min(Math.max(10 * (maxWidth / widthAt10px),minFontSize),maxFontSize);
		$heading.css("font-size",newFontSize + "px");
	})
	
}

$( document ).ready(function() {
	setupTitleTextFill('.title-banner-content','h3');
});