Add auto-expand feature to textareas

Crap, Interface used tabs in the code. Removed them.

works as advertised on OSX opera. i verified steven's browsers as well ... we need some IE testing.

Video here: http://acko.net/blog/expanding-textareas

Very nice, Steven & Moshe!

Subscribing.

Very Cool
Tested on IE6 and IE7... and... it works!

[Possibly seperate issues
1. Are we testing on below IE6?
Its actually works on IE 5.5... but Garland doesn't [sidebars missing]
2. Could we now reduce the default height of the body textarea?
]

I support this feature. Nice work again.

I support this too. Small but incredible convenient improvement.

Nice one :)

It would be nice if the following can be addressed / confirmed:

• Removing text doesn't reset the textarea.
• Can the "growing" be eased rather than incrementally increased in a stop-start fashion? This will make things less distracting. Similarly, perhaps the bottom buffer can be increased by a line to minimise the chances of the scroll bar appearing.
• FF2 XP - I notice the text in the textarea "flickering" and generally jittering about as I type.
• Would it not be preferable for the resizing to be top first and bottom last? This would keep the typist's eye level constant for a longer period of time.. i.e. generally tend to be more comfortable.

Thanks.
-K

• Added code so it shrinks back until the original / user-set size.
• Animated expanding and scrolling.
• Increased blank area.

I don't think expanding up first makes sense. The natural expectation is that if you press enter, you go down. This is the case right until when the textarea reaches the bottom.

Oh and also fixed it so that it expands when you hit enter, not after you type the first character on a new line.

• Resizing a blank textarea beforehand and then typing makes the script go wonky as it first eases to the textarea's original size.
• Text area "reset" works fine when I backspace, but fails when I select all and delete.
• Pasting text that occupies an area larger than the textarea results in the script failing.
• At times, the resizing behaves more like an after thought - I am usually way past the bottom of the text area.
• In addition to the above point, eases seem to .. incremental rather than cumulative. IOW, they seem to queue themselves up rather than reorganise themselves into one single ease. Could the easing interval be increased in order to render it less perceptible?
• The text jitter issue remains.

As alanburke stated earlier, the node body field can be made smaller due to this patch. Perhaps, that can be included right here.

Thanks,
-K

Or you could help out *sigh*. Isn't it fun to develop core features everybody wants but nobody seems to work on?

I would. But I don't grok jQuery yet, sorry.

-K

Nice one Steven, this solves a big inconvenience indeed.

Just a thought, how would this patch behave when a user adds WYSIWYG modules?

WYSIWYG modules should disable the #resizable behaviour already. This patch has no effect on them.

I like this a LOT! +many
Will apply the patch and do some testing in my devel environment

Thanks!

When the scrollbar appears in Firefox 2, and I continue typing, the added text will be added to the bottom of the textarea, but the scrollbar stays at the top... In other words, the user cannot see what is being typed, except if he scrolls down.

I also noticed that the scrollbar is redrawn (it flickers) every time I press enter after this. This might be the related. Every time it is redrawn it is by default at the top as opposed to at the bottom..

rather difficult to explain this, but I can provide more info if required.

Thanks
jacauc

Subscribing

Let's see if we can get this into Drupal 6. See video above for a visual presentation.

Re-rolled for HEAD. Also adressed:
* "Text jittering"/unresponsivness reported above - I had to revert to no easing since it was the cause. I *really* tried making it work, but I think this is good enough.
* Textarea shrinks when all text is deleted.
* Safari (3 on Win) was not expanding like the rest - was a bit jumpy. Added an extra check for that. Needs testing on Mac.
* Added a little more padding so "Split summary at cursor" and "Input format is visible" when fully expanded.
* It now checks if the textarea has been resized manually, then it doesn't auto-expand.
* Smaller body field.

Tested on Firefox 2 (Win/Linux), Opera 9 (Win), Safari 3 (Win) IE6/7

Very nice idea.

However, firebug says:

for every character I type. Also using the grippy once disables this entirely - I understand the idea behind having both the grippy and the auto-resize, but I'm not convinced about it behaving like that if both happen to be used together.

Thanks for the review! Make sure you force refresh the browser, the error is probably a caching issue. To me it makes sence that the manual resize takes preference over the auto-exand - the user knows best so to speak.

Yes you're right, a forced browser refresh worked. On second thoughts, I can see how it'd be really annoying to have it change the textarea size after resizing it, and can't think of a clean way it could be reset to auto-resize on the same page. In that case needs review on Mac/linux etc.

I like the sound of this; is there any chance you can release the jQuery code as a pure jQuery plugin as well? While I use Drupal for my own site, I'm also developing for some non-Drupal sites that this would be useful on.

Patch non longer apply in collapse.js (Cannot apply hunk @@ 12 ), textarea.js (Cannot apply hunk @@ 9 ) and node.pages.inc.

Moving to usability.

i made a module like this for 6 and been thinking about porting the features of it to 7. my original intention for the module was to allow the admin to resize the row count of the body textarea for nodetypes, then it grew to include the comment, and cck fields. there's also an option to remove the 'split summary at cursor' button, and whether the textarea should have a grippie or not.

allowing the admin to choose how the field should be resized for the textarea i think is more beneficial, then just adding a default resize imo.

Added tags

drupal 6.14 with textarea-grow_2.patch from above. here is the output:

patching file misc/textarea.js
Hunk #1 FAILED at 12.
Hunk #2 FAILED at 29.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file misc/drupal.js
Hunk #1 succeeded at 229 (offset 2 lines).
patching file misc/textarea.js
Hunk #1 FAILED at 1.
Hunk #2 FAILED at 25.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file modules/node/node.pages.inc
Hunk #1 FAILED at 247.
1 out of 1 hunk FAILED -- saving rejects to file modules/node/node.pages.inc.rej

Don't even care about the patch that much, just wanted to cite this error I ran into. What I do what to know is how to make any text area within my content resizable. Do I use a jquery command to do that? How? Pretty sure I give the textarea tag a "resizable" class. What else needs to be done?