• This repository has been archived on 27/Jan/2020
  • Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    CoffeeScript
  • Created about 12 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Make your text sizing responsive!

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>