The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 7 more by this user. Created: 06/22/12
Last CDN Push: 11/7/12
Build Tag: gallery-2012.11.07-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0pr3
Free for use.
I was looking for a textarea expander that was both effective and elegant. And I ran into the one developed by Neil Jenkins (http://www.alistapart.com/articles/expanding-text-areas-made-elegant/).
In stead of measuring height, it works with a hidden span where the content is copied.
As such, this component relies more on CSS than on Javascript and is extremely compact and efficient.
Min and max height for the text area can be set through CSS, a fixed 'height' will be modified by the component, so you should use min and max-height to set your desired size
Setting max-height:
.textarea-expander textarea {max-height:100px;}
Setting min-height
.textarea-expander textarea,.textarea-expander pre {min-height:100px;}
I tested this in versions 3.4.0 to 3.6.0pr2
If you want to adjust the padding, font or border color for the textarea, you can provide your own skin file or simply override
.textarea-expander {
position: relative;
border: 1px solid #BDC7D8;
background: #fff;
}
.textarea-expander > textarea, .textarea-expander > pre{
padding: 3px !important;
font: 400 13px/16px helvetica, arial, sans-serif;
}
<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.11.07-21-32'
}).use("node", 'gallery-textarea-expander', function(Y) {
Y.all("textarea").plug(Y.TextareaExpander);
});
</script>
</head>
<body>
<form>
<textarea>Hello world
All code on this site is licensed under the BSD License unless stated otherwise.