steveosoule
11/14/2012 - 6:22 PM

JavaScript Dynmaically Fit Text in Div

JavaScript Dynmaically Fit Text in Div

javascript-dynamically-fit-text-in-div.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script>
		;(function($) {
		    $.fn.textfill = function(options) {
		        var fontSize = options.maxFontPixels;
		        var ourText = $('span:visible:first', this);
		        var maxHeight = $(this).height();
		        var maxWidth = $(this).width();
		        var textHeight;
		        var textWidth;
		        do {
		            ourText.css('font-size', fontSize);
		            textHeight = ourText.height();
		            textWidth = ourText.width();
		            fontSize = fontSize - 1;
		        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
		        return this;
		    }
		})(jQuery);
		
		$(document).ready(function() {
		    $('.jtextfill').textfill({ maxFontPixels: 1000 });
		});
	</script>
</head>
<body>
	<div class='jtextfill' style='width:700px;height:600px;'>
	    <span>My Text</span>
	</div>	
</body>
</html>