Textarea resizer

Textarea resizer

OK, ladies and gentleman: new toy. This one is veeeeeeeeeeeeeeery useful.

resize-textarea-util.js
Just, hover your mouse over a textarea, and press ctrl at the same time. A pop up menu will appear with several options to resize the current textarea. Play a bit and you'll quickly find out what each of the options do.

Note: there are still a few tweaks I must do, like using the current Opera skin as theme for the menu, and providing a more robust CSS, to deal well with as many webpages as possible.

Neat - what does the "Auto" option do? Does this..., oh, guess I've just figured that one out LOL!

Really usefull, thanks a lot.

Very good work! Thanks xErath!

New version:

• Deals much better with page styles ! (uses custom elements)
• Uses system colors and fonts
• Probably some bug squashed.

resize-textarea-util.js Have fun

Works kinda erratic. Won't display menu most of the time on my.opera's quick reply textarea (I'm holding ctrl and moving mouse into textarea).

And really gets in the way when copying/pasting text with ctrl+c/ctrl+v. I'm talking about previous version now, which was actually showing the menu all the time.

Oh, I see now, that you have changed shortcut to Shift. I image this might cause annoyance too.

Maybe just invoke the menu when hovering _into_ textarea from some other element. So don't invoke menu when we are inside textarea and we press shift. What do you think? It should be doable from what I know.

I changed to shift because it's less likely for one to use shift shortcuts with the mouse interaction too.
I realized of the annoyance of using Ctrl when I selected text and immediately pressed Ctrl+c/v.

That could be useful. I hate to scroll with a long post, so this nifty JS might be just they key to avoiding confusion...

It would be nice if the menu came up on the release of the shift key, so that typing quotes and parenthesis doesn't trigger the event.

Originally posted by armbar:

It would be nice if the menu came up on the release of the shift key, so that typing quotes and parenthesis doesn't trigger the event.

The menu comes when you hold shift key then move the mouse OR when you move the mouse and press shift. Anyway, you can change it so that menu comes when you hold Ctrl+Shift :

Change this :

var shortcut = { eventType:'mousemove', shiftKey:true, ctrlKey:false, altKey:false };

to

var shortcut = { eventType:'mousemove', shiftKey:true, ctrlKey:true, altKey:false };

Yeah, I know how to change it for me, but I figured xErath would want to change his own script. It happens most for me when I'm pasting a quote as the first thing in a text box.

Either way, just a suggestion.

Handy script, but for me, when navigating a page with SHIFT + Arrows, it messes up..

Example: http://en.wikipedia.org/wiki/Opera_browser
Navigate through the table of contents, it selects "1 History", then "History", then "2 Future development", then "Future development"
but it should select "1 History", then "2 Future Development" and so on.
And this happens not only on wikipedia.

Is there a chance that this will be fixed in the future?

Originally posted by __A_n_d_y_N__:

Handy script, but for me, when navigating a page with SHIFT + Arrows, it messes up..

For sure it's not the script that's affecting that.

Originally posted by xErath:

For sure it's not the script that's affecting that.

Still it seems to be this script..
I just deleted my userjs folder, and then the shift + arrows worked just fine, then I put the textarea resizer back in and the same thing that I described in my last post happened again. =/

Originally posted by __A_n_d_y_N__:

Still it seems to be this script..

Yup. Confirmed. xErath's script is causing problem with that

Originally posted by AyushJ:

Yup. Confirmed. xErath's script is causing problem with that

I confirm, that better to use the key “Ctrl”.
First version of script looks for me better. I have changed values for increase/decrease to 5-10-20 columns/lines.

Is it possible to make a version of this script that adds a resize icon to the textarea? i.e. so I can just click-and-drag to resize?

There's another script like this one floating around the forums, which enables the textarea corner to be dragged.
I've picked that one up and editted it to prevent many problems I encountered, like not pickig up dinamically generated textareas, or the script messing with the textarea's css. I had some problems with it.
textarea-drag-resizer.js

Awesome! That fixed up the problem I mentioned in one of the other threads. Cheers, xerath

Originally posted by xErath:

There's another script like this one floating around the forums, which enables the textarea corner to be dragged.

Excellent!

Glad I dropped by this thread again. The drag option is much better for me - I used to invoke the resize menu by mistake too many times using the CTRL key.

Thanks!

Hmmm.... probably best not to use "Drag to Scroll" in Opera 9.50 with this. It still works but it's a bit awkward. In fact Drag to Scroll makes it REALLY awkward to select text too, in case anyone's interested.

Wow! this button is a killer!

An excellent job once again xErath.

New version of the drag resizer script, and this one is the initial version with new license and proper crediting
Drag the lower-right corner to resize, and double click it to restore the original dimensions.
Works with inputs and textareas
textarea-drag-resizer.js

You forgot to exclude input@type=image xErath

Originally posted by AyushJ:

You forgot to exclude input@type=image xErath

hum.. It might be good to keep those. What do you think ?
And, I forgot to include images

Originally posted by xErath:

hum.. It might be good to keep those. What do you think ?
And, I forgot to include images

We won't hold it against you.

BTW: Reply to this topic or quote me without using the Quick Reply field, and hover your mouse over the submit button. Notice anything odd?

Originally posted by GT500:

Notice anything odd?

image inputs.

Originally posted by xErath:

image inputs.

Sorry, I guess I didn't notice that.

Some problems:

1. Different width/height calculations have to be applied for textarea in quirks mode. Right now script is bassically broken in quirks mode when textareas have padding/border set. Look where drag handler appears on most of this textareas: http://east.portland.ne.jp/~sigekazu/css/test/textarea2.htm .
   
2. Opera have some bug that makes images added to documentElement sometimes invsible. I had the same problem with OrangooSpellCheck before. I've changed

   document.documentElement.appendChild

   to

   (document.body||document.documentElement).appendChild

   back then. Same could me made for drag resizer.
   
3. Textareas with big padding and/or border have this annoying effect when starting resizing. Needs some more refined size calculations.
   
4. Little comsetic nitpicking. When we click on drag handler and move mouse a bit, text area bottom right corner is aligning to cursor. It's basically same thing as previous point but on smaller scale.
   

I have fixed those problems (excluding the first one but it's a metter of adding few if's). If you want I can post fixed version or send it to you so that you could review and polish it.

EDIT: And file input seems to have wrong box model applied in latest build (9594).
http://files.myopera.com/d.i.z./bugs/inputs_boxmodel.html

Originally posted by d.i.z.:

Different width/height calculations have to be applied for textarea in quirks mode. Right now script is bassically broken in quirks mode when textareas have padding/border set. Look where drag handler appears on most of this textareas: http://east.portland.ne.jp/~sigekazu/css/test/textarea2.htm .

They all appear fine to me.

Originally posted by d.i.z.:

Textareas with big padding and/or border have this annoying effect when starting resizing. Needs some more refined size calculations.

Confirmed.

A couple of suggestions from me:
1. I'd like to turn off the corner image altogether (I find it a little distracting) but keep the cursor change. [EDIT: ok found the bit in the code with the image, commenting it out seems to work without any errors]
2. A Creative Commons license is not for software, as I recently discovered. Use GPL instead.

Originally posted by svivian:

Originally posted by d.i.z.:

Different width/height calculations have to be applied for textarea in quirks mode. Right now script is bassically broken in quirks mode when textareas have padding/border set. Look where drag handler appears on most of this textareas: http://east.portland.ne.jp/~sigekazu/css/test/textarea2.htm .

They all appear fine to me.

Because you are using O9.23. Latest alphas have some fixes for textarea so that border-box boxmodel is properly applied in quirksmode. This breaks script.

Originally posted by d.i.z.:

Because you are using O9.23. Latest alphas have some fixes for textarea so that border-box boxmodel is properly applied in quirksmode. This breaks script.

OK well you didn't say that you were using alpha verison

I copied this new textarea resizer JS replacing of expandarea.js. I'm happy to use it instead of expandarea (although it is a nice JS, too), because...

- ...Textarea resizer doesn't cover the right-below corner, so I can use NoScript.js, too.
- ...Textarea resizer doesn't "ignore" the Ospell.js. (Expandarea can't cooperate with ospell correctly)

Congrats for the fine work

Hi again.
I fixed the bugs d.i.z. reported, but I still need a better way to get the computed box-sizing value for textareas, else textareas like the ones on gmail will have the drag anchor mispositioned.

textarea-drag-resizer.js

Not good: http://files.myopera.com/d.i.z./bugs/inputs_boxmodel.html

When I get home, I will send you my version which works great both in quirks and standards mode unless one forces different box model for textarea (or input) with box-sizing. And this is because I base my calculations on document.compatMode.

xErath: it's very nice to see you continuing to develop this very, very nice script!

Keep up the good work, we are enjoying it! ;-)

textarea-drag-resizer.js
More another small update.
Now textarea's in gmail work ok , d.i.z. testcase looks better and selects are resized too.

@d.i.z., it's too cumbersome and ineficcient to check stylesheets for the proper rules which affect box-sizing for each element.
The script deals with most common cases, and I added a sniff for when Opera supports boxSizing in CSSStyleDeclaration objects.

Originally posted by xErath:

@d.i.z., it's too cumbersome and ineficcient to check stylesheets for the proper rules which affect box-sizing for each element.

Of course, I would never suggest anything like this.

It works really well now, better then mine, thanks to exceptions for 'file' and 'select'. Moose explained to me that it's not really a bug with quirks box-model for them so I have settled this in my mind now.

But please take image from my version where I have cropped graphic. Yours is resized with css and that makes it look bad. And add a bit of opacity maybe?

And sorry for off topic but I hate that bug in Opera 9.50 when scripts contain non-ascii characters and you edit them and they no longer work. If I save your script without modifying anything, my editor removes all trailing spaces. And this makes script not work anymore because of parsing error. Is this bug on it's way to be fixed?
And I wonder how you make your scripts so they work initially? I guess that these white spaces compensate those non-ascii characters in some way but how do you know where to put those spaces and how much of them?

Originally posted by d.i.z.:

And this makes script not work anymore because of parsing error. Is this bug on it's way to be fixed?

known and reported #288115

Originally posted by d.i.z.:

And I wonder how you make your scripts so they work initially?

Having an accented char makes the last byte of the file being ignored.

Originally posted by d.i.z.:

And I wonder how you make your scripts so they work initially?

My editor keeps all white-space
Just leave a newline in the end.

The script now uses d.i.z. image. It looks a bit better than my previous squeezed anchor.
Thanks
textarea-drag-resizer.js

thanks for this great script

Excellent Script xErath!!

I've always wanted a way to do this on a lot of pages & now I can!!

Now, my next JS type task/wish is to get this problem resolved.

Thanks again

nice script!
but the resized box returns to its usual size when leaving and later returning to a site
it would be great if the script could retain the resized dimensions of the input/text boxes
perhaps an option to either 'Discard' or 'Remember' a site's resized dimensions...

Originally posted by skye11:

nice script!
but the resized box returns to its usual size when leaving and later returning to a site
it would be great if the script could retain the resized dimensions of the input/text boxes
perhaps an option to either 'Discard' or 'Remember' a site's resized dimensions...

As default I prefer to return to the original size. But as on option, nothing exception.

viniczej,
many websites' input boxes are just way too short (ie. google)
esp. since there's plenty of room (unused space) across the page to accomodate a longer one
it's a pain to have to resize Google's input box every time I input lengthy search parameters
a site-specific resizing option would be ideal

Originally posted by skye11:

nice script!but the resized box returns to its usual size when leaving and later returning to a siteit would be great if the script could retain the resized dimensions of the input/text boxesperhaps an option to either 'Discard' or 'Remember' a site's resized dimensions...

This case fits much better with a user stylesheet.

Unfortunatelly it doesnt work on Y!360 and many other sites

Very useful ... tanks

Originally posted by skye11:

many websites' input boxes are just way too short (ie. google)
esp. since there's plenty of room (unused space) across the page to accomodate a longer one
it's a pain to have to resize Google's input box every time I input lengthy search parameters
a site-specific resizing option would be ideal

Just create a CSS file with this content and add its location to your site preferences for Google:

input[type="text"] {
     width:600px !important;
}