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 23b6b85..b3642ea 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -10,13 +10,21 @@ */ (function( $ ){ - + 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 }; + + setup_listener(); return this.each(function(){ var $this = $(this); // store the object @@ -30,15 +38,23 @@ 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. - $(window).resize(resizer); + $(document).bind("fittext-resize", resizer); + $(document).bind("fittext-reset", resetter); }); }; -})( jQuery ); \ No newline at end of file +})( jQuery );