Textfill for jQuery 1.6? (not working)
I hope you can enlighten me. I'm trying to use GeekMonkey's textfill plugin in a joomla website which has jQuery 1.6.1 (the template uses it). The plugin is not working. Is there any way to fix this? I can't find any other textfill out there!
This is GeekMonkey's plugin:
; (function($) {
/**
* Resizes an inner element's font so that the inner element completely fills the outer element.
* @au开发者_C百科thor Russ Painter WebDesign@GeekyMonkey.com
* @version 0.1
* @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
* @return All outer elements processed
* @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
*/
$.fn.textfill = function(options) {
var defaults = {
maxFontPixels: 40,
innerTag: 'span'
};
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var fontSize = Opts.maxFontPixels;
var ourText = $(Opts.innerTag + ':visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
});
};
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36, innerTag: 'h1' });
});
And
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 70 });
$('#dyntext').keyup(function() {
$('.dyntextval').html(this.value);
$('.jtextfill').textfill({ maxFontPixels: 70 });
});
});
Thanks in advance, desperate user.-
For that plugin to work you need to
- set the container's (
.jtextfill
) width and height - display the inner tag inline (
display:inline
in the CSS).
Demo: http://jsfiddle.net/2btyN/
精彩评论