From ab9d5f116bd9249c16779b44fabdb96d2ddc02bd Mon Sep 17 00:00:00 2001 From: Nathan Friedly Date: Fri, 8 Jul 2016 15:11:19 -0400 Subject: [PATCH 1/3] typo fixes "trottle" > "throttle" in code & comments + a couple of other comment typos. --- jquery-responsive-headlines.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/jquery-responsive-headlines.js b/jquery-responsive-headlines.js index c2443f2..d205612 100644 --- a/jquery-responsive-headlines.js +++ b/jquery-responsive-headlines.js @@ -18,7 +18,7 @@ into responsive headlines: $('h1').responsiveHeadlines(); -There are also a handfull of options that you can use to customize +There are also a handful of options that you can use to customize the behaviour of the plugin. The easiest way to understand what they do is read the comments in the source code below and do some experimentation on your own using the HTML demo page which accompanies this code in the @@ -34,7 +34,7 @@ just to get you started: JQUERY THROTTLE/DEBOUNCE jQuery Responsive Headlines works best if you use it together with Ben Alman's jquery-throttle-debounce plugin. It's a plugin for -controling/limiting the number of calls to a function. +controlling/limiting the number of calls to a function. In this case it's very useful since the window resize event is triggered very often and the function that determines the size of the text is bound to this event. @@ -42,7 +42,7 @@ bound to this event. Ben Alman's project page: http://benalman.com/projects/jquery-throttle-debounce-plugin/ Ben Alman's repository on GitHub: https://github.com/cowboy/jquery-throttle-debounce -Per default jquery-trottle-debounce is used (the option useThrottleDebounce +Per default jquery-throttle-debounce is used (the option useThrottleDebounce is set to true) and therefore I have included a copy of it in this repository. As I said, for performance reasons I recommend that you use it, but if you for some reason don't want it just set the option useThrottleDebounce to false. @@ -110,9 +110,9 @@ for some reason don't want it just set the option useThrottleDebounce to false. // Is jquery-throttle-debounce used? if(o.useThrottleDebounce) { - if(o.throttleDebounceParams.method === 'trottle') { + if(o.throttleDebounceParams.method === 'throttle') { // Throttle method - $(window).on('resize', $.trottle(o.throttleDebounceParams.delay, o.throttleDebounceParams.no_trailing, function() { + $(window).on('resize', $.throttle(o.throttleDebounceParams.delay, o.throttleDebounceParams.no_trailing, function() { self.resizeText(); })); } else { From ec2871d44b0fcbd8b4291d3607b19354620fe5b2 Mon Sep 17 00:00:00 2001 From: Nathan Friedly Date: Fri, 8 Jul 2016 15:22:37 -0400 Subject: [PATCH 2/3] Run at window.onload --- jquery-responsive-headlines.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/jquery-responsive-headlines.js b/jquery-responsive-headlines.js index d205612..b0a475e 100644 --- a/jquery-responsive-headlines.js +++ b/jquery-responsive-headlines.js @@ -101,6 +101,13 @@ for some reason don't want it just set the option useThrottleDebounce to false. // Run the resize function self.resizeText(); + // Event handler when all page assets are loaded + // This handles cases where this was triggered at DOMReady, but fonts/css/etc. + // load later that change the layout of the page + $(window).on("load", function() { + self.resizeText(); + }); + // Event handler when the window is resized. // To avoid too many calls to the resizeText function, which // will lead to bad performance, I use Ben Almans jquery-throttle-debounce From 18bce1d759aec45d7ac3d0498b625f3d3d71a381 Mon Sep 17 00:00:00 2001 From: Nathan Friedly Date: Mon, 11 Jul 2016 14:37:06 -0400 Subject: [PATCH 3/3] Minifying changes With UglifyJs2 (via jscompress.com) --- jquery-responsive-headlines.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery-responsive-headlines.min.js b/jquery-responsive-headlines.min.js index 6798f91..793a474 100644 --- a/jquery-responsive-headlines.min.js +++ b/jquery-responsive-headlines.min.js @@ -1 +1 @@ -!function(a,b){function g(b,c){this.element=b,this.options=a.extend({},f,c),this._defaults=f,this._name=e,this.init()}var e="responsiveHeadlines",f={container:"parent",maxFontSize:9999,minFontSize:1,useThrottleDebounce:!0,throttleDebounceParams:{method:"debounce",delay:250,no_trailing:!1,at_begin:!1}};g.prototype={init:function(){var c=this,d=a(this.element),e=this.options;"inline"!==d.css("display")&&d.css("display","inline"),"nowrap"!==d.css("white-space")&&d.css("white-space","nowrap"),c.resizeText(),e.useThrottleDebounce?"trottle"===e.throttleDebounceParams.method?a(b).on("resize",a.trottle(e.throttleDebounceParams.delay,e.throttleDebounceParams.no_trailing,function(){c.resizeText()})):a(b).on("resize",a.debounce(e.throttleDebounceParams.delay,e.throttleDebounceParams.at_begin,function(){c.resizeText()})):a(b).on("resize",function(){c.resizeText()})},resizeText:function(){var d,b=a(this.element),c=this.options;d="parent"===c.container?b.parent():a("."+c.container);var e=d.width(),f=b.outerWidth(),g=parseInt(b.css("font-size"),10),h=g;if(e>f){for(;b.outerWidth()h;)h++,b.css("font-size",h);b.outerWidth()>d.width()&&c.minFontSized.width()&&c.minFontSizes){for(;n.outerWidth()a;)a++,n.css("font-size",a);n.outerWidth()>t.width()&&i.minFontSizet.width()&&i.minFontSize