diff --git a/jquery-responsive-headlines.js b/jquery-responsive-headlines.js index c2443f2..b0a475e 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. @@ -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 @@ -110,9 +117,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 { 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