Here are some quick and useful JQuery plugins from Jason Frame’s “JQuery Grab Bag“.

Auto-Grow TextArea

The technique is borrowed from Facebook that uses an off-screen <div> to calculate the required dimensions of the textarea to reveal all texts inside instead of to display vertical scrollbar. Run the following code line to enable auto-grow behavior to all textareas on page.

$('textarea').autogrow();

Online Demo

Input Hint

It’s not always necessary to attach label to every text field in web form, instead you can use hint to tell user what to type in the fields. This plugin will help keeping away from tedious codes to add hints to input boxes.

First, add hint attribute to input fields.

<input type="text" hint="Your first name" name="firstname" />
 
<input type="text" hint="Your last name" name="lastname" />

Then, simply get the functionality work on the fields.

$('*[@hint]').inputHint();

Online Demo

Text Resizing from Cookie

This is not a JQuery’s plugin but still depends on JQuery to allow user to select appropriate text size on reading. Of course, some modern browsers feature zoom functionality but not equally good. So, users still want to resize text on fly.

We’ll need to define some styles with different font sizes for body tag.

body.small { font-size: 10px; }
body.medium { font-size: 12px; }
body.large { font-size: 14px; }

And some links for size selection accordantly.

<div id='sizer'>
      <a href='#' class='small'>small</a>
      <a href='#' class='medium'>medium</a>
      <a href='#' class='large'>large</a>
</div>

Then call cookieResize() function on load. Done.

cookieResize('#sizer a', 'medium');

Online Demo

Download example codes