Add window max/min width options. #8

Open
wants to merge 1 commit into from
View
8 README.md
@@ -25,13 +25,21 @@ 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%`.
* Be ready to tweak till everything balances out.
* 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
View
64 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);
+
});
};
View
11 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);