From edf71d4df8938e229bd80f4f4f81dd8db573d8ce Mon Sep 17 00:00:00 2001 From: Michael Wheeler Date: Mon, 6 Feb 2012 21:18:18 -0800 Subject: [PATCH 1/3] Adding a throttle to resize, and also give the ability to reset via custom event --- example.html | 3 ++ jquery.fittext.js | 99 ++++++++++++++++++++++++++++------------------- 2 files changed, 63 insertions(+), 39 deletions(-) diff --git a/example.html b/example.html index 77774cd..0248139 100644 --- a/example.html +++ b/example.html @@ -54,6 +54,9 @@

Squeeze with FitText

$("#fittext1").fitText(); $("#fittext2").fitText(1.2); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' }); + $(document).bind("keydown", function() { + $.resetFitText(); + }); diff --git a/jquery.fittext.js b/jquery.fittext.js index 23b6b85..ac9349e 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,44 +1,65 @@ /*global jQuery */ /*! -* FitText.js 1.0 -* -* Copyright 2011, Dave Rupert http://daverupert.com -* Released under the WTFPL license -* http://sam.zoy.org/wtfpl/ -* -* Date: Thu May 05 14:23:00 2011 -0600 -*/ + * FitText.js 1.0 + * + * Copyright 2011, Dave Rupert http://daverupert.com + * Released under the WTFPL license + * http://sam.zoy.org/wtfpl/ + * + * Date: Thu May 05 14:23:00 2011 -0600 + */ (function( $ ){ - - $.fn.fitText = function( kompressor, options ) { - - var settings = { - 'minFontSize' : Number.NEGATIVE_INFINITY, - 'maxFontSize' : Number.POSITIVE_INFINITY + var resizeOccurred = true; + + function setup_throttle() { + $(window).resize(function() { + resizeOccurred = true; + }); + + window.setInterval(function() { + if(resizeOccurred) { + resizeOccurred = false; + $(document).trigger("fittext-resize"); + } + }, 300); + + setup_throttle = 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 ); + } + + setup_throttle(); + + // 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(); + + var resetter = function() { + var style = $this.attr("style"); + $this.attr("style", style.replace(/font-size:.*?;/, "")); + $(document).unbind("fittext-resize", resizer); + $(document).unbind("fittext-reset", resetter); }; - - 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); - - }); - - }; - -})( jQuery ); \ No newline at end of file + + $(document).bind("fittext-resize", resizer); + $(document).bind("fittext-reset", resetter); + }); + }; + +})( jQuery ); From 211569a28aa9b0a6c3f80000e14a0b6fba734c65 Mon Sep 17 00:00:00 2001 From: Michael Wheeler Date: Mon, 6 Feb 2012 21:19:32 -0800 Subject: [PATCH 2/3] Removed obsolete change to example --- example.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/example.html b/example.html index 0248139..77774cd 100644 --- a/example.html +++ b/example.html @@ -54,9 +54,6 @@

Squeeze with FitText

$("#fittext1").fitText(); $("#fittext2").fitText(1.2); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' }); - $(document).bind("keydown", function() { - $.resetFitText(); - }); From 496b35440159e4d7f8760bc574d3e0bc4c1782e0 Mon Sep 17 00:00:00 2001 From: Michael Wheeler Date: Mon, 6 Feb 2012 21:34:13 -0800 Subject: [PATCH 3/3] Updated to drop throttle, added note to readme about resetting. --- README.md | 5 +++ jquery.fittext.js | 109 ++++++++++++++++++++++------------------------ 2 files changed, 57 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 7197801..09529f3 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,11 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and ` $("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +### Resetting +You can reset all fitted text so that it will fallback to CSS defaults by triggering the "fittext-reset" event. + + $(document).trigger("fittext-reset"); + ## CSS Tips * Make sure your headline is `display: block;` or `display: inline-block;` with a specified width, i.e. `width: 100%`. diff --git a/jquery.fittext.js b/jquery.fittext.js index ac9349e..b3642ea 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,65 +1,60 @@ /*global jQuery */ /*! - * FitText.js 1.0 - * - * Copyright 2011, Dave Rupert http://daverupert.com - * Released under the WTFPL license - * http://sam.zoy.org/wtfpl/ - * - * Date: Thu May 05 14:23:00 2011 -0600 - */ +* FitText.js 1.0 +* +* Copyright 2011, Dave Rupert http://daverupert.com +* Released under the WTFPL license +* http://sam.zoy.org/wtfpl/ +* +* Date: Thu May 05 14:23:00 2011 -0600 +*/ (function( $ ){ - var resizeOccurred = true; - - function setup_throttle() { - $(window).resize(function() { - resizeOccurred = true; - }); - - window.setInterval(function() { - if(resizeOccurred) { - resizeOccurred = false; - $(document).trigger("fittext-resize"); - } - }, 300); - - setup_throttle = 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 ); - } - - setup_throttle(); - - // 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(); - - var resetter = function() { - var style = $this.attr("style"); - $this.attr("style", style.replace(/font-size:.*?;/, "")); - $(document).unbind("fittext-resize", resizer); - $(document).unbind("fittext-reset", resetter); + function setup_listener() { + $(window).resize(function() { + $(document).trigger("fittext-resize"); + }); + // only once + setup_listener = function(){}; + } + $.fn.fitText = function( kompressor, options ) { + + var settings = { + 'minFontSize' : Number.NEGATIVE_INFINITY, + 'maxFontSize' : Number.POSITIVE_INFINITY }; - $(document).bind("fittext-resize", resizer); - $(document).bind("fittext-reset", resetter); - }); - }; + setup_listener(); + + 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))); + }; + // resetter() wipes out inline fonts and stops listening + var resetter = function() { + var style = $this.attr("style"); + $this.attr("style", style.replace(/font-size:.*?;/, "")); + $(document).unbind("fittext-resize", resizer); + $(document).unbind("fittext-reset", resetter); + }; + + // Call once to set. + resizer(); + + // Call on resize. Opera debounces their resize by default. + $(document).bind("fittext-resize", resizer); + $(document).bind("fittext-reset", resetter); + + }); + + }; })( jQuery );