Add optional support for matchMedia

README.md

@@ -8,7 +8,7 @@ Here is a simple FitText setup:
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script src="jquery.fittext.js"></script>
 <script>
-  jQuery("#responsive_headline").fitText();
+  jQuery('#responsive_headline').fitText();
 </script>
 ```
 
@@ -18,8 +18,8 @@ Your text should now fluidly resize, by default: Font-size = 1/10th of the eleme
 If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is `1`.
 
 ```javascript
-jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up   (resizes more aggressively)
-jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively)
+jQuery('#responsive_headline').fitText(1.2); // Turn the compressor up   (resizes more aggressively)
+jQuery('#responsive_headline').fitText(0.8); // Turn the compressor down (resizes less aggressively)
 ```
 
 This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely.
@@ -28,7 +28,14 @@ This will hopefully give you a level of "control" that might not be pixel perfec
 FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy.
 
 ```javascript
-jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
+jQuery('#responsive_headline').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
+```
+
+## With matchMedia
+FitText allows you to pass in a `matchMedia` option that uses Paul Irish's [matchMedia.js](https://github.com/paulirish/matchMedia.js/) (if it's available - so you'll need to include it separately) and only runs fitText if the criteria matches.
+
+```javascript
+jQuery('#responsive_headline').fitText(1.2, { matchMedia: 'only screen and (min-width: 500px)' });
 ```
 
 ## CSS FAQ

example.html

@@ -32,6 +32,9 @@
 			#d45848 -4px 4px 0;
 			margin: 5% auto 5%;
 		}
+		h1#fittext4 {
+			font: 44px/1 "Impact";
+		}
 	</style>
 
 	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -44,16 +47,22 @@
 		<h1 id="fittext1">Squeeze with FitText</h1>
 		<h1 id="fittext2">Squeeze with FitText</h1>
 		<h1 id="fittext3">Squeeze with FitText</h1>
+		<h1 id="fittext4">Squeeze with FitText</h1>
 		</header>
 		<p>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.</p>
 	</div>
 
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+	<!-- github.com/paulirish/matchMedia.js isn't available on a CDN, so I'll include respond.js since it contains matchMedia - this is optional -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+
  	<script src="jquery.fittext.js"></script>
 	<script type="text/javascript">
 		$("#fittext1").fitText();
 		$("#fittext2").fitText(1.2);
-		$("#fittext3").fitText(1.1, { minFontSize: '50px', maxFontSize: '75px' });
+		$("#fittext3").fitText(1.4, { minFontSize: '50px', maxFontSize: '75px' });
+		$("#fittext4").fitText(1.6, { matchMedia: 'only screen and (min-width: 850px)' });
 	</script>
 
 </body>

jquery.fittext.js

@@ -17,7 +17,8 @@
     var compressor = kompressor || 1,
         settings = $.extend({
           'minFontSize' : Number.NEGATIVE_INFINITY,
-          'maxFontSize' : Number.POSITIVE_INFINITY
+          'maxFontSize' : Number.POSITIVE_INFINITY,
+          'matchMedia'  : null
         }, options);
 
     return this.each(function(){
@@ -27,7 +28,7 @@
 
       // 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)));
+        $this.css('font-size', ( ( settings.matchMedia != null && typeof(matchMedia) == 'function' ) ? ( matchMedia(settings.matchMedia).matches ? true : false ) : true ) ? Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) : '' );
       };
 
       // Call once to set.