Simple jQuery Plugin that auto resizes text to fill a specific sized div (great for responsive slideshows that utilize large banner text with variable lengths), derived from https://gist.github.com/iam4x/5015270

autoSizr.js

$.fn.autoSizr = function () {
  var el, elements, _i, _len, _results;
  elements = $(this);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return $(this); 
};

Thanks for this!

One issue I have is that when I call this on window resize, it works when the window gets smaller, but not when the window gets bigger.

I can't quite figure out why looking at the code. Any ideas?

@forthekill:

The plugin doesn't work as you need, it only checks if the text fits in the box so when the window gets bigger it's fitting inside the box so it won't change a thing. The Plugin could be updated to make it always as big or small as to fit the text in perfectly, Right now it only shrinks the text it doesn't enlarge it.

i my stylesheet i set the text size to 1000px, the script did not resize. my js is set to run after css, why is this happening?

Any notes about how to use it? Let's say that I have a div with an id of: "my_div". How do you use it on that div?

To make this grow and shink here is a simple hack on line 10. Crude but works for my use case. 200px may be extreme in some cases.

$.fn.autoSizr = function () {
	var el, elements, _i, _len, _results;
	elements = $(this);
	if (elements.length < 0) {
		return;
	}
	_results = [];
	for (_i = 0, _len = elements.length; _i < _len; _i++) {
		el = elements[_i];
		$(el).css({'font-size' : '200px'})
		_results.push((function(el) {
		var resizeText, _results1;
		resizeText = function() {
			var elNewFontSize;
			elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
			return $(el).css('font-size', elNewFontSize);
		};
		_results1 = [];
		while (el.scrollHeight > el.offsetHeight) {
			_results1.push(resizeText());
		}
		return _results1;
		})(el));
	}
	return $(this); 
	};

Usage:

$('#myDivId').autoSizr();