npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery.autobox

v3.1.0

Published

Resize the textarea (vertically or horizontally) automatically to fit the contents

Downloads

552

Readme

Autogrow <textarea> while typing

Resize the <textarea> (vertically or horizontally) automatically to fit the contents.

devDependencies

Getting Started

Download the production version or the development version or use unpkg version directly in your HTML.

In your web page:

<script src="jquery.js"></script>

<!-- Include local copy of the lib -->
<script src="dist/jquery.autobox.min.js"></script>

<!-- or CDN version -->
<script src="//unpkg.com/jquery.autobox"></script>

<script>
jQuery(function($) {

    // Bind autobox events to all TEXTAREAs in `.myView` and it's descendants, animation speed 200ms and delay before restoring size 400ms
    $('.myView').autoboxBind({ speed: 200, delay: 400 });

    // Bind autobox events to `document`, listening on `textarea.autobox` elements.
    $(document).autoboxOn('textarea.autobox');

    // Bind autobox events to `document`, listening on `textarea.autobox` elements, with horizontal autogrow.
    $(document).autoboxOn('textarea.autoboxh', { resize: 'horizontal' });

    // Bind autobox events to `document`, listening on `textarea.autobox` elements, don't shrink after blur.
    $(document).autoboxOn('textarea.autoboxp', { permanent: true });

    // Adjust once Height of all TEXTAREAs in `.myView` and it's descendants.
    $('.myView').autobox({ resize: 'vertical' });

    // Adjust once Height and/or Width of all TEXTAREAs in `.myView` and it's descendants.
    $('.myView').autobox();
});
</script>

If you are using a build system:

import jQuery from 'jquery'; // we need jQuery
import autobox from 'jquery.autobox'; // import the init function of the plugin

autobox(jQuery); // init the plugin on this copy of jQuery

Documentation

This plugin exports three jQuery methods:

  • $(sel).autobox(options) - Adjust Height/Width of all TEXTAREAs in this and it's descendants
  • $(sel).autoboxOn(sel, options) - Bind Auto Height/Width Adjustment events to matched element, listening on sel elements
  • $(sel).autoboxBind(options) - Bind Auto Height/Width Adjustment events to all TEXTAREAs in this and it's descendants
  • $.autobox(elements, options) - same as $(elements).autobox(options)

Options:

  • permanent: bool - if false (default), the textarea would restore its size on blur
  • resize: "" | "vertical" | "horizontal" - resize mode, leave empty for auto-detection
  • speed: number - restore height animation speed (default 0 - no animation)
  • delay: number - delay before restoring textarea height on blur (default 250 milliseconds)

Examples

<table class="autobox">
    <tr><td>Text field #1</td><td><textarea resize="vertical">Some very important contents</textarea></td></tr>
    <tr><td>Text field #2</td><td><textarea resize="horizontal">Ulgy resize, but may be useful sometimes</textarea></td></tr>
    <tr><td>Text field #3</td><td><textarea style="resize:vertical">CSS resize works too</textarea></td></tr>
</table>

<script>
$('body').autoboxOn('.autobox', { permanent: false, resize: '' }); // All textareas inside .autobox elements would be autoboxed
</script>

Live example on DUzun.Me.

Release History

v3.0.0

In AMD, CommonJs and ES6 modules jquery.autobox exports the init function only and doesn't initialize automatically.

See Getting Started above.