SlabText - Responsive Text Plugin For jQuery
File Size: | 15.4 KB |
---|---|
Views Total: | 4051 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SLABTEXT is a jQuery Plugin that makes it easy to produce Bold, Big, Attractive, and Responsive Text effects.
You might also like:
- WideText - Responsive Text Resize Plugin
- jQuery Plugin For Auto Resizing Text - textfill
- FitText - Flexible Font Size Plugin
How to use it:
1. The HTML
<h1 id="h1">jQueryScript.Net – One of the BEST jQuery websites in the world that provides web designers and developers with a simple way to preview and download a variety of Free jQuery Pluins. </h1>
2. The CSS
.slabtexted .slabtext { display: -moz-inline-box; display: inline-block; white-space: nowrap; } .slabtextinactive .slabtext { display: inline; white-space: normal; font-size: 1em !important; letter-spacing: inherit !important; word-spacing: inherit !important; *letter-spacing:0 !important; *word-spacing:0 !important; } .slabtextdone .slabtext { display: block; }
3. Include jQuery library and SlabText.js on your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./js/jquery.slabtext.min.js"></script>
4. Call the plugin with options
function slabTextHeadlines() { $("h1").slabText({ // Don't slabtext the headers if the viewport is under 380px "viewportBreakpoint":380 }); };
5. All possible options.
// The ratio used when calculating the characters per line // (parent width / (font-size * fontRatio)). "fontRatio" : 0.78, // Always recalculate the characters per line, not just when the // font-size changes? Defaults to true (CPU intensive) "forceNewCharCount" : true, // Do we wrap ampersands in <span class="amp"> "wrapAmpersand" : true, // Under what pixel width do we remove the slabtext styling? "headerBreakpoint" : null, "viewportBreakpoint" : null, // Don't attach a resize event "noResizeEvent" : false, // By many milliseconds do we throttle the resize event "resizeThrottleTime" : 300, // The maximum pixel font size the script can set "maxFontSize" : 999, // Do we try to tweak the letter-spacing or word-spacing? "postTweak" : true, // Decimal precision to use when setting CSS values "precision" : 3, // The min num of chars a line has to contain "minCharsPerLine" : 0, // Callback function fired after the headline is redrawn "onRender" : null
Change Logs:
v2.4.0 (2016-03-16)
- Updated legacy IE CSS
v2.4.0 (2016-03-05)
- Added callback function and extra classnames
v1.8.3 (2013-03-26)
- Added sanity check to prevent infinite looping of the while loop if the parentWidth is 0, e.g. parent is "display: none".
This awesome jQuery plugin is developed by freqdec. For more Advanced Usages, please check the demo page or visit the official website.