jQuery Plugin To Resize Text with Cookie & localStorage Support - Text Resizer

Text Resizer is a jQuery plugin which allows the user to resize the text of a given container with CSS3 scale transitions. The plugin uses the HTML5 localStorage API or jQuery cookie plugin to remember the text size your user selected.

Basic Usage:

1. Add font size controls to resize the text.

<ul class="resizer">
  <li class="sm">A</li>
  <li class="md">A</li>
  <li class="lg">A</li>
</ul>

2. Define the small, large, and medium font sizes in your CSS.

.resize-sm { font-size: .8em; }

.resize-md { font-size: 1em; }

.resize-lg { font-size: 1.5em; }

3. Add a CSS3 transition effect as the user changes the text size.

.animate {
  -webkit-transition: font-size 0.5s;
  -moz-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  -ms-transition: font-size 0.5s;
  transition: font-size 0.5s;
}

4. Wrapper the text you wish to resize into a container.

<div class="demo">
  <p>
    ...
  </p>
</div>

5. Include jQuery library, jQuery cookie plugin and the jQuery Text Resizer plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.resizer.min.js"></script>

6. Call the plugin on the text container.

$(".demo").resizable({

// default options
"storageSupported": typeof Storage !== "undefined",
"controls":".resizer",
"cookie":"resizer-cookie",
"lg":"resize-lg",
"md":"resize-md",
"sm":"resize-sm",
"animate":true

});

---

This awesome jQuery plugin is developed by cuadra. For more Advanced Usages, please check the demo page or visit the official website.