Make your text sizing responsive!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md updated demo page and version of jquery Aug 1, 2013
index.html
jquery-1.10.2.min.js
jquery.responsiveText.coffee
jquery.responsiveText.js

README.md

jQuery responsiveText

A jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlines, build responsive tables and more!

View the demo at [http://garyhepting.com/jquery-responsive-text]

Installation:

Initialize the plugin:

<script type="text/javascript">
  $(document).ready(function() {
    $('.responsive').responsiveText();
  });
</script>

Configurations can be added to the markup of each element with simple data attributes:

<h1 class="responsive" data-compression="8" data-min="20" data-max="60">Responsive Text</h1>

or

<p class="responsive" data-compression="25" data-min="14" data-max="40">A jQuery plugin to set font sizes responsively based on its' container width. Use responsiveText.js to have scalable headlines, build <a href="https://github.com/ghepting/jquery-responsive-tables">responsive tables</a> and more!</p>

Scrollable Text:

<h1 class="responsive" data-scrollable="1" data-min="20" data-max="60">Scrollable Responsive Text</h1>

Complete Options:

<h1 class="responsive" data-compression="8" data-scrollable="1" data-scrollspeed="1000" data-scrollreset="500" data-min="20" data-max="100">Responsive Text with all of the options</h1>