Responsive text resize plugin – WideText

WideText is a small jQuery plugin, that allows developers to create fully responsive text elements.

Responsive text resize

Those text elements will resize accordingly to the width of the browser window. Just try it.

Plug-in dual licensed under MIT and GPL.

Responsive text resize plugin
Responsive text resize plugin

How to use:

(function($) {
  $.fn.wideText = function() {
    return this.each( function() {
      // Add "wtext" class to each element and then set up the magic
      var obj = $(this),
      rtext = obj.addClass( 'wtext' );
      // Work that magic each time the browser is resized
      $(window).on( 'resize', function() {
        obj.css( { 'fontSize': parseInt( obj.css( 'fontSize' ) ) * ( obj.parent().width() / obj.width() ) + 'px', 
                  'visibility' : 'visible' } );
      } ).resize();
    });
  };
})(jQuery);

Apply to some element:


$(window).load( function() {
  $( '.responsive' ).wideText();
} );

The default CSS:

.wtext {
  white-space: nowrap;
  display: inline-block;
}

Get it

Demo, full information and download available here:

http://cbavota.bitbucket.org/widetext

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1