From f5248c064f4c9c03c3086b8f21fc6cd667927bcd Mon Sep 17 00:00:00 2001 From: Lucas Krause Date: Thu, 4 Sep 2014 11:20:35 +0200 Subject: [PATCH 1/2] Add several options to jquery.fittext.js --- jquery.fittext.js | 83 ++++++++++++++++++++++++++++++----------------- 1 file changed, 54 insertions(+), 29 deletions(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index 0b3ddef..92eb9c2 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -9,35 +9,60 @@ * Date: Thu May 05 14:23:00 2011 -0600 */ -(function( $ ){ +(function($){ + //jquery fitText([number compressor,] object options) + $.fn.fitText=function(compressor, options){ + options=options || {}; + + if(compressor){ + if(typeof compressor=="object"){ + //If the options object was specified using the first arguments, the second argument is ignored. + options=compressor; + }else{ + //If the compressor was specified using the first arguments, that value is used, regardless of the options object. + options.compressor=compressor; + } + } + + //Setup options + var settings=$.extend({ + //Number + "compressor":1, + //Must be parseable by `parseFloat()` + "minFontSize":Number.NEGATIVE_INFINITY, + //Must be parseable by `parseFloat()` + "maxFontSize":Number.POSITIVE_INFINITY, + //A function called before the new font-size is applied. The font-size + //is passed as first argument and `this` belongs to the DOM element. + //If `false` (checked using `===`) is returned, the font-size won't be applied. + "before":$.noop, + //A function called after the new font-size was applied. The font-size + //is passed as first argument and `this` belongs to the DOM element. + "after":$.noop, + //A jQuery object used instead of the object this function was called on. + //Does not affect `this` in "before" and "after". + "proxy":null + }, options); + + return this.each(function(){ + //Store the object + var $this=$(this); - $.fn.fitText = function( kompressor, options ) { + //Resizer() resizes items based on the object width divided by the compressor * 10 + var resizer=function(){ + var size=Math.max(Math.min($this.width()/(settings.compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)); + + if(settings.before.apply($this.get(0), [size])!==false){ + (settings.proxy || $this).css("font-size", size); + } + settings.after.apply($this.get(0), [size]); + }; - // Setup options - var compressor = kompressor || 1, - settings = $.extend({ - 'minFontSize' : Number.NEGATIVE_INFINITY, - 'maxFontSize' : Number.POSITIVE_INFINITY - }, options); + //Call once to set. + resizer(); - return this.each(function(){ - - // Store the object - var $this = $(this); - - // 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).on('resize.fittext orientationchange.fittext', resizer); - - }); - - }; - -})( jQuery ); + //Call on resize. Opera debounces their resize by default. + $(window).on("resize.fittext orientationchange.fittext", resizer); + }); + }; +})(jQuery); From ee0aa0cfffe1b47f4726f9002d01570f083e8be0 Mon Sep 17 00:00:00 2001 From: Lucas Krause Date: Thu, 4 Sep 2014 11:23:25 +0200 Subject: [PATCH 2/2] Update example.html to demonstrate the new options --- example.html | 108 ++++++++++++++++++++++++--------------------------- 1 file changed, 50 insertions(+), 58 deletions(-) diff --git a/example.html b/example.html index c6a2aee..a8f28fe 100644 --- a/example.html +++ b/example.html @@ -1,60 +1,52 @@ - - - - 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.

-
- - - - - - + + + + jQuery.fitText Additional Options + + + + + + +

jQuery.fitText Additional Options

+

Click to toggle FitText

+

101

+