').fitText()` will NOT work diff --git a/example.html b/example.html index 77774cd..784a689 100644 --- a/example.html +++ b/example.html @@ -42,8 +42,8 @@

Squeeze with FitText

FitText

FitText like skinny jeans

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -52,8 +52,8 @@

Squeeze with FitText

diff --git a/jquery.fittext.js b/jquery.fittext.js index 1c4b29e..163df81 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,42 +1,53 @@ /*global jQuery */ -/*! +/*! * FitText.js 1.0 * * Copyright 2011, Dave Rupert http://daverupert.com -* Released under the WTFPL license +* Released under the WTFPL license * http://sam.zoy.org/wtfpl/ * * Date: Thu May 05 14:23:00 2011 -0600 */ (function( $ ){ - + + var isStyleAdded; + $.fn.fitText = function( kompressor, options ) { - - var settings = { - 'minFontSize' : Number.NEGATIVE_INFINITY, + + // add .fit-text '); + isStyleAdded = true; + } + + $(this).addClass('fit-text'); + + var settings = $.extend({ + 'minFontSize' : 1, 'maxFontSize' : Number.POSITIVE_INFINITY - }; - + }, options || {} ); + return this.each(function(){ var $this = $(this); // store the object - var compressor = kompressor || 1; // set the compressor - - if ( options ) { - $.extend( settings, options ); - } - + var compressor = kompressor || 1; // set the compressor + // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { - $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + // get proportional size of text to fit in its parent + var size = ( parseInt( $this.css('font-size'), 10 ) / $this.width() ) * $this.parent().innerWidth(); + size = Math.max( parseFloat( settings.minFontSize ), size ); + size = Math.min( parseFloat( settings.maxFontSize ), size ); + size *= compressor; + $this.css( 'font-size', size ); }; // Call once to set. resizer(); - - // Call on resize. Opera debounces their resize by default. + + // Call on resize. Opera debounces their resize by default. $(window).resize(resizer); - + }); };