From ec1c263dda07c9b7d48e6749eb43df1fcd8c5793 Mon Sep 17 00:00:00 2001 From: James Pederson Date: Fri, 19 Dec 2014 21:36:19 -0600 Subject: [PATCH 1/5] Add optional support for matchMedia, an option that takes the same arguments as Paul Irish's original function. Still runs if matchMedia isn't found. --- README.md | 7 +++++ example-matchmedia.html | 65 +++++++++++++++++++++++++++++++++++++++++ jquery.fittext.js | 14 +++++++-- 3 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 example-matchmedia.html diff --git a/README.md b/README.md index d23119a..fe417c3 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,13 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and ` 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 - **Make sure your container has a width!** diff --git a/example-matchmedia.html b/example-matchmedia.html new file mode 100644 index 0000000..900a78c --- /dev/null +++ b/example-matchmedia.html @@ -0,0 +1,65 @@ + + + + + FitText with matchMedia + + + + + + + + +
+
+

Squeeze with FitText

+

Squeeze with FitText

+

Squeeze with FitText

+
+

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.

+

Item #3 will only resize if the window is larger than 500px in width.

+
+ + + + + + + + + + + diff --git a/jquery.fittext.js b/jquery.fittext.js index 0b3ddef..a7f6fc9 100644 --- a/jquery.fittext.js +++ b/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,16 @@ // 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))); + + // Boolean var to indicate if we should resize + var doResize = ( settings.matchMedia != null && typeof( matchMedia ) == 'function' ) ? ( matchMedia( settings.matchMedia ).matches ? true : false ) : true; + + if ( doResize ) { + $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + } else { + $this.css('font-size', ''); + } + }; // Call once to set. From 4a026b35605a9775d4b873e36ab6ea6de521453e Mon Sep 17 00:00:00 2001 From: James Pederson Date: Fri, 19 Dec 2014 21:51:45 -0600 Subject: [PATCH 2/5] Quick fix to shorten the code and define one less variable. --- jquery.fittext.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index a7f6fc9..716aada 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -29,10 +29,8 @@ // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { - // Boolean var to indicate if we should resize - var doResize = ( settings.matchMedia != null && typeof( matchMedia ) == 'function' ) ? ( matchMedia( settings.matchMedia ).matches ? true : false ) : true; - - if ( doResize ) { + // run if matchMedia is found and matches, or if it isn't found at all + if ( ( settings.matchMedia != null && typeof( matchMedia ) == 'function' ) ? ( matchMedia( settings.matchMedia ).matches ? true : false ) : true ) { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); } else { $this.css('font-size', ''); From 8a13f14758798aabe5c8e5dbea7fb3193976028e Mon Sep 17 00:00:00 2001 From: James Pederson Date: Fri, 19 Dec 2014 21:59:27 -0600 Subject: [PATCH 3/5] Fucther shorten the matchMedia logic so it fits on one line. --- jquery.fittext.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index 716aada..d273097 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -28,14 +28,7 @@ // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { - - // run if matchMedia is found and matches, or if it isn't found at all - if ( ( settings.matchMedia != null && typeof( matchMedia ) == 'function' ) ? ( matchMedia( settings.matchMedia ).matches ? true : false ) : true ) { - $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); - } else { - $this.css('font-size', ''); - } - + $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. From 902da54c0dfc5f360fc91014ce98d0a27c9dd1c1 Mon Sep 17 00:00:00 2001 From: James Pederson Date: Fri, 19 Dec 2014 22:24:35 -0600 Subject: [PATCH 4/5] Remove separate mediaMatch example file and include a mediaMatch example in the main file. --- example-matchmedia.html | 65 ----------------------------------------- example.html | 11 ++++++- 2 files changed, 10 insertions(+), 66 deletions(-) delete mode 100644 example-matchmedia.html diff --git a/example-matchmedia.html b/example-matchmedia.html deleted file mode 100644 index 900a78c..0000000 --- a/example-matchmedia.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - FitText with matchMedia - - - - - - - - -
-
-

Squeeze with FitText

-

Squeeze with FitText

-

Squeeze with FitText

-
-

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.

-

Item #3 will only resize if the window is larger than 500px in width.

-
- - - - - - - - - - - diff --git a/example.html b/example.html index c6a2aee..4ba5cc5 100644 --- a/example.html +++ b/example.html @@ -32,6 +32,9 @@ #d45848 -4px 4px 0; margin: 5% auto 5%; } + h1#fittext4 { + font: 44px/1 "Impact"; + } @@ -44,16 +47,22 @@

Squeeze with FitText

Squeeze with FitText

Squeeze with FitText

+

Squeeze with FitText

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.

+ + + + From 9c3e7363c7020d6c11c9e5529086027f085249cb Mon Sep 17 00:00:00 2001 From: James Pederson Date: Sat, 20 Dec 2014 14:46:45 -0600 Subject: [PATCH 5/5] Change all double quotes to single quotes. --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fe417c3..201c4de 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Here is a simple FitText setup: ``` @@ -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,14 +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)' }); +jQuery('#responsive_headline').fitText(1.2, { matchMedia: 'only screen and (min-width: 500px)' }); ``` ## CSS FAQ