jquery-adaptText v1.3.4

jQuery adaptText

A jQuery plugin that help rescale text depending on it's container width.

Table of contents

• Main files
• Quick start
• Requirements
• Usage
• Examples
• Options
• Methods
• Events
• No conflict
• Browser support
• Contributing
• Development
• Changelog
• Inspired
• Copyright and license

Main files

dist/
├── jquery-adaptText.js
├── jquery-adaptText.es.js
└── jquery-adaptText.min.js

Quick start

Several quick start options are available:

Download the latest build

• Development - unminified
• Production - minified

Install From Bower

bower install jquery-adaptText --save

Install From Npm

npm install jquery-adaptText --save

Install From Yarn

yarn add jquery-adaptText

Build From Source

If you want build from source:

git clone git@github.com:amazingSurge/jquery-adaptText.git
cd jquery-adaptText
npm install
npm install -g gulp-cli babel-cli
gulp build

Done!

Requirements

jquery-adaptText requires the latest version of jQuery.

Usage

Including files:

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-adaptText.js"></script>

Required HTML structure

<p class="responsive">Hello world</p>
<p class="responsive" data-compression="10" data-max="100" data-min="10">Hello world</p>
<h1 class="responsive" data-scrollable="true">Long Text With Scrollable Support</h1>

Initialization

All you need to do is call the plugin on the element:

jQuery(function($) {
  $('.responsive').adaptText(); 
});

Examples

There are some example usages that you can look at to get started. They can be found in the examples folder.

Options

jquery-adaptText can accept an options object to alter the way it behaves. You can see the default options by call $.adaptText.setDefaults(). The structure of an options object is as follows:

{
  compression: 10,
  max: Number.POSITIVE_INFINITY,
  min: Number.NEGATIVE_INFINITY,
  scrollable: false,
  scrollSpeed: 1000,
  scrollResetSpeed: 300,
  onResizeEvent: true
}

Methods

Methods are called on adaptText instances through the adaptText method itself. You can also save the instances to variable for further use.

// call directly
$().adaptText('resize');

// or
var api = $().data('adaptText');
api.resize();

resize()

Resize the font size.

$().adaptText('resize');

enable()

Enable the resize functions.

$().adaptText('enable');

disable()

Disable the resize functions.

$().adaptText('disable');

Events

jquery-adaptText provides custom events for the plugin’s unique actions.

$('.the-element').on('adaptText::ready', function (e) {
  // on instance ready
});

No conflict

If you have to use other plugin with the same namespace, just call the $.adaptText.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="jquery-adaptText.js"></script>
<script>
  $.adaptText.noConflict();
  // Code that uses other plugin's "$().adaptText" can follow here.
</script>

Browser support

Tested on all major browsers.

As a jQuery plugin, you also need to see the jQuery Browser Support.

Contributing

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-adaptText before submitting an issue. There are several ways to help out:

• Bug reports
• Feature requests
• Pull requests
• Write test cases for open bug issues
• Contribute to the documentation

Development

jquery-adaptText is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

npm install -g gulp
npm install -g babel-cli
npm install

Then you can generate new distributable files from the sources, using:

gulp build

More gulp tasks can be found here.

Changelog

To see the list of recent changes, see Releases section.

Inspired

• fittext by Paravel
• SlabText by Brian McAllister
• responsiveText by Gary Hepting
• jquery-responsive-text by ghepting

Copyright and license

Copyright (C) 2016 amazingSurge.

Licensed under the LGPL license.

⬆ back to top