diff --git a/README.md b/README.md index dc26f78..3da69a6 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,13 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and ` $("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +### _new:_ minWidth & max Width + +FitText now allows two optional window width pixel values: `minWidth` and `maxWidth`. Useful for responsive design scenarios when FitText should only be used at certain window sizes. + + // Will only invoke FitText if window width >= 480px + $("#responsive_headline").fitText(1.2, {minWidth:480}); + ## CSS Tips * Make sure your headline is `display: block;` or `display: inline-block;` with a specified width, i.e. `width: 100%`. @@ -32,6 +39,7 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and ` * FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback. ## Changelog +* `v 1.2` = FitText allows minWidth and maxWidth options to enable/disable for certain window widths * `v 1.1` - FitText now ignores font-size and has minFontSize & maxFontSize options * `v 1.0.1` - Fix for broken font-size. * `v 1.0` - Initial Release diff --git a/jquery.fittext.js b/jquery.fittext.js index 23b6b85..0f99fff 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,42 +1,52 @@ /*global jQuery */ /*! -* FitText.js 1.0 +* FitText.js 1.2 * * Copyright 2011, Dave Rupert http://daverupert.com +* Contribution by Matt Wiebe http://somadesign.ca/ * Released under the WTFPL license * http://sam.zoy.org/wtfpl/ * -* Date: Thu May 05 14:23:00 2011 -0600 +* Date: Mon Sep 05 12:31:00 2011 -0600 */ (function( $ ){ $.fn.fitText = function( kompressor, options ) { - - var settings = { - 'minFontSize' : Number.NEGATIVE_INFINITY, - 'maxFontSize' : Number.POSITIVE_INFINITY - }; - - return this.each(function(){ - var $this = $(this); // store the object - var compressor = kompressor || 1; // set the compressor - - if ( options ) { - $.extend( settings, options ); - } - - // 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))); - }; - - // Call once to set. - resizer(); - - // Call on resize. Opera debounces their resize by default. - $(window).resize(resizer); - + + var settings = { + 'minFontSize' : Number.NEGATIVE_INFINITY, + 'maxFontSize' : Number.POSITIVE_INFINITY, + 'minWidth' : 0, + 'maxWidth': Number.POSITIVE_INFINITY + }; + + return this.each(function(){ + var $this = $(this); // store the object + var compressor = kompressor || 1; // set the compressor + + if ( options ) { + $.extend( settings, options ); + } + + // Resizer() resizes items based on the object width divided by the compressor * 10 + var resizer = function () { + var winWidth = $(window).width(); + // inside window threshold? + if ( winWidth >= settings.minWidth && winWidth <= settings.maxWidth ) { + $this.css('fontSize', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + } + else { + $this.css('fontSize', ''); + } + }; + + // Call once to set. + resizer(); + + // Call on resize. Opera debounces their resize by default. + $(window).resize(resizer); + }); }; diff --git a/jquery.fittext.min.js b/jquery.fittext.min.js new file mode 100644 index 0000000..4c1e708 --- /dev/null +++ b/jquery.fittext.min.js @@ -0,0 +1,11 @@ +/* +* FitText.js 1.2 +* +* Copyright 2011, Dave Rupert http://daverupert.com +* Contribution by Matt Wiebe http://somadesign.ca/ +* Released under the WTFPL license +* http://sam.zoy.org/wtfpl/ +* +* Date: Mon Sep 05 12:31:00 2011 -0600 +*/ +(function(a){a.fn.fitText=function(d,b){var c={minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY,minWidth:0,maxWidth:Number.POSITIVE_INFINITY};return this.each(function(){var e=a(this);var g=d||1;if(b){a.extend(c,b);}var f=function(){var h=a(window).width();if(h>=c.minWidth&&h<=c.maxWidth){e.css("fontSize",Math.max(Math.min(e.width()/(g*10),parseFloat(c.maxFontSize)),parseFloat(c.minFontSize)));}else{e.css("fontSize","");}};f();a(window).resize(f);});};})(jQuery); \ No newline at end of file