What
A text resizing Plugin for jQuery
Installation
CSS
<link type="text/css" href="./css/resizer.css" rel="stylesheet"> JavaScript
<script src="./js/jquery-1.9.1.min.js"></script> <script src="./js/jquery.cookie.js"></script> <script src="./js/jquery.resizer.min.js"></script> HTML
Controls
<ul class="resizer"> <li class="sm">A</li> <li class="md">A</li> <li class="lg">A</li> </ul> Content
<div class="resizable-content"> <p>[Text]</p> </div> Usage
Initializing the jQuery Plugin
<script> $(".resizable-content").resizable(); </script> Editing the Font Sizes
Inside of ./css/resizer.css you can edit the .resize-sm, .resize-md, and .resize-lg classes to change the font sizes of the content area.
.resize-sm{ font-size:.8em; } .resize-md{ font-size:1em; } .resize-lg{ font-size:1.5em; } .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; } .resizer li{ cursor:pointer; } .active{ text-decoration:underline; } Configuration
<script> $(".resizable-content").resizable({[setting]:[value]}); </script> Settings
| Setting | Description | Syntax | Type | Values |
|---|---|---|---|---|
| Storage Supported | Override if HTML5 Storage is Supported | storageSupported | Boolean | false or true |
| Controls | Selector for Resizing Controls | controls | String | [jQuery Selector] |
| Cookie | Name of Cookie to be saved | cookie | String | "resizer-cookie" or [value] |
| Large Class | Class name to be used for Large | lg | String | "resize-lg" or [value] |
| Medium Class | Class name to be used for Medium | md | String | "resize-md" or [value] |
| Small Class | Class name to be used for Small | sm | String | "resize-sm" or [value] |
| Animation | If text should animate to new size. | animate | Boolean | true or false |
Notes
All text inside of the resizable container should use EMs for sizing. This plugin changes the container size, so all children will be relative to that parent.
