Permalink
Browse files

Added noResizeEvent option & link to BigText

  • Loading branch information...
1 parent cef79db commit 8886ebdd623f5d7bdfc6be0c9ab30f45c3f61ab1 @freqdec committed Jan 10, 2012
Showing with 28 additions and 22 deletions.
  1. +3 −1 index.html
  2. +24 −20 js/jquery.slabtext.js
  3. +1 −1 js/jquery.slabtext.min.js
View
@@ -205,6 +205,8 @@ <h2 id="h6">Plugin options</h2>
<dd>An Integer value that indicates the minimum pixel width the viewport may have before the slabtext treatment is removed. There is no default value.</dd>
<dt>headerBreakpoint</dt>
<dd>An Integer value that indicates the minimum pixel width the header may have before the slabtext treatment is removed. There is no default value.</dd>
+ <dt>noResizeEvent</dt>
+ <dd>A Boolean value that instructs the script <em>not</em> to set the <code>window.resize</code> event (TRUE). Useful for those of you using a fixed width layout. Defaults to FALSE.</dd>
</dl>
<p>It&#8217;s also worth noting that any non-breaking space character used to prevent widowed words within the original, non-adjusted headline will also be included within the adjusted headline.</p>
<h2 id="h7">A note on the CSS</h2>
@@ -241,7 +243,7 @@ <h2 id="h8">Buyer beware</h2>
<li>Always call the script <em>after</em> all <code>fontface</code> fonts have downloaded (if using). I&#8217;ve hacked this for the demo to enable you to see the headline transformation as the script kicks-in but you should always use google WebFont loaders <code>active()</code> and <code>inactive()</code> callbacks to launch the slabText treatment (or a similar "font loaded" callback feature from another font provider).</li>
</ol>
<h2 id="h9">Credit where credit is due</h2>
- <p>Based on the nice, shiny <a href="http://fittextjs.com/">fittext</a> jQuery plugin by <a href="http://paravelinc.com/">Paravel</a> &amp; the wonderful <a href="http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/">slabtype algorithm</a> by Erik Loyer.</p>
+ <p>Based on the nice, shiny <a href="http://fittextjs.com/">fittext</a> jQuery plugin by <a href="http://paravelinc.com/">Paravel</a> &amp; the wonderful <a href="http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/">slabtype algorithm</a> by Erik Loyer. Zach Leatherman has also written a jQuery plugin named <a href="http://www.zachleat.com/web/bigtext-makes-text-big/">BigText</a> with similar but not exact functionality which is well worth a visit.</p>
<h2 id="h10">Grab the code</h2>
<p>The code can be <a href="http://github.com/freqDec/slabText/">downloaded from github</a>. Both minified and unminified versions are included within the bundle. The minified version currently clocks-in at just over 2k &ndash; this drops to 1k when gzipped.</p>
View
@@ -14,7 +14,9 @@
"wrapAmpersand" : true,
// Under what pixel width do we remove the slabtext styling?
"headerBreakpoint" : null,
- "viewportBreakpoint" : null
+ "viewportBreakpoint" : null,
+ // Don't attach a resize event
+ "noResizeEvent" : false
};
// Add the slabtexted classname to the body to initiate the styling of
@@ -142,25 +144,27 @@
// Immediate resize
resizeSlabs();
- // Window resize event
- $(window).resize(function() {
- // Only run the resize code if the viewport width has changed.
- // we ignore the viewport height as it will be constantly changing
- // due to the font-size resizing and IE fires a resize event whenever
- // vertical height has changed leading to an endless loop and
- // locked browser. Poor IE.
-
- // Could wrap this in conditional comments?
- if($(window).width() == viewportWidth) {
- return;
- };
-
- viewportWidth = $(window).width();
-
- // Throttle the resize event to 300ms
- clearTimeout(resizeThrottle);
- resizeThrottle = setTimeout(resizeSlabs, 300);
- });
+ if(!settings.noResizeEvent) {
+ // Window resize event
+ $(window).resize(function() {
+ // Only run the resize code if the viewport width has changed.
+ // we ignore the viewport height as it will be constantly changing
+ // due to the font-size resizing and IE fires a resize event whenever
+ // vertical height has changed leading to an endless loop and
+ // locked browser. Poor IE.
+
+ // Could wrap this in conditional comments?
+ if($(window).width() == viewportWidth) {
+ return;
+ };
+
+ viewportWidth = $(window).width();
+
+ // Throttle the resize event to 300ms
+ clearTimeout(resizeThrottle);
+ resizeThrottle = setTimeout(resizeSlabs, 300);
+ });
+ };
});
};
})(jQuery);

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 8886ebd

Please sign in to comment.