João Eiras

Meet meenoo and drag

Wednesday, 25. June 2008, 23:34:44

user javascript, customizing, cool, opera

I've previously posted at the forum two scripts to resize textareas.
Now I'll release them here.

Meet the two siblings: power-drag and power-meeno. They complement each other, one being more complete, the other being more broadly usable. Both these scripts started out from the simple desire of resizing textareas easily, alla CSS3 UI. If Safari can do it, then why should not Opera, with some bells and whistles?

Power-meenoo adds a small menu which can be toggled by pressing ALT and hovering a textarea. The menu has many options, and the script is localizable, currently translated in english, portuguese (duh

) and polish (credits to Wasacz). The options are self explainatory, so you can bore yourselves trying them.

Power-drag is simply cool. Probably I should call it "awesome script"? Pressing your shift key then hover textareas, select boxes, iframes, objects, images or input fields to simply resize them by dragging its lower right corner. Simple, clean and efficient. Double click to restore the original dimensions. You can enable the dragging corner always, or use another modifier key. The script requires shift by default because makes the script less intrusive, and does not cover small elements in the page, while having a smaller performance impact.

One script DOES NOT require the other to function properly. They're independent.

Now, you might recall these scripts from the forum. Power-meenoo now requires alt because ctrl is usualy associated with clipboard shortcuts, shift with selections, so that leaves us with alt which is usually associated with menus, so it fits well.
The old scripts you had resize-textarea-util.js and textarea-drag-resizer.js are therefore deprecated. Please delete them if you want to download one of these scripts.

Get them here.
power-drag
power-meenoo

As always, updates will be annouced in the blog post, and the links always point to the most recently updated files..

Spammers using M2?happy birthday!

Comments

Darken # 26. June 2008, 02:11

Nice works! thanks.

serious # 26. June 2008, 06:36

I like power-drag. meenoo is a little overkill for me as average user. and it also doesn't work so well (as [alt] also triggers the menu -> sometimes it interferes/doesn't work)

*spotlight*

WOFall # 26. June 2008, 15:07

Thank you, thank you, thank you! I've been expecting you to do this this since september

larskl # 26. June 2008, 17:48

nice script!

bug report:
set "{nodeName:'img',resizeh:false,resizev:false},"
resize triangle still appears. it shouldn't appear if both resizeh and resizev are disabled

workaround:
comment out the line

feature request:
vertical resizing of <select> should change the "size" so more items are shown

d.i.z. # 26. June 2008, 21:08

About xerath-power-drag.js:

Resize image looks really nice when it's using image from new Standard Skin:

background: -o-skin("Scrollbar Grip"); width: -o-skin !important; height: -o-skin !important;

It's not very noticeable which is a plus IMO. And it has transparency which your image lacks.

Maybe you should "steal" it from standard skin?

And if not then change width and height from 9px to 10px cause ugly resizing takes place now.

I don't think script should enable resize grip for images by default. It makes small images really hard (or even impossible) to click.

xErath # 26. June 2008, 22:25

Nice idea d.i.z. but that image is a square. I prefer a small triangle, to fit the corner.

Tamil # 27. June 2008, 14:22

Thanks.

xErath # 21. July 2008, 23:25

Originally posted by d.i.z.:

I don't think script should enable resize grip for images by default. It makes small images really hard (or even impossible) to click.

You have to press a modifier key, shift by default, so it won't get in your way.

bieuzy # 24. July 2008, 09:08

Thank you for your very useful scripts.
Besides, I made the french translation for power-meenoo you will find below:


fr:{
resize:'Redimensionner',
width:'largeur',
height:'hauteur',
unit:'unité',
increase1line:'ajouter 1 ligne',
increaselines:'ajouter @1 lignes',
decrease1line:'diminuer 1 ligne',
decreaselines:'diminuer @1 lignes',
increase1column:'ajouter 1 colonne',
increasecolumns:'ajouter @1 colonnes',
decrease1column:'diminuer 1 colonne',
decreasecolumns:'diminuer @1 colonnes',
auto:'auto',
reset:'RàZ',
custom:'personnaliser'
},

serious # 24. July 2008, 11:48

hi xErath

just found a "problem" with power-drag: you can't resize the avatars here in the comments section, just wanted to let you know - maybe this also applies to a case where the script would be useful.

anyways, have a nice day
serious

Pure_BY # 21. August 2008, 15:51

This script does not work in Opera 9.5 any more! Could you please update?

Thanks a lot in advance!

xErath # 21. August 2008, 21:09

which ? Both work fine for me.

Lex1 # 22. August 2008, 12:19

xerath-power-drag.js

Fine. But title 'Drag to resize this textarea, double-click to reset dimensions' looks strange on images

Pure_BY # 24. August 2008, 00:56

> which ? Both work fine for me.

I was talking about power-drag. It indeed works fine — I'm sorry, I didn't test well.
I got used to how your old version of textarea-drag-resizer worked; however, I did read that nowadays I must hold Shift for resizing, but it only works if you move the cursor out of the texarea, and then hover it over right lower corner. If you try to hover over that corner from inside the texarea, no “drag icon” appears, even if you hold down Shift — that behaviour is different from the old one, and it mislead me.

Both script do indeed work fine on 9.52. Thanks a lot — they really make life a lot easier ;-)

But is there any page or something, where I could track down the upcoming updates of both scripts?

Lex1 # 24. August 2008, 19:18

I don't think script should enable resize grip for images by default. It makes small images really hard (or even impossible) to click.

Maybe it will be useful for anybody yet:

{nodeName:'img',resizeh:true,resizev:true,validate:function(target){return enableOnModifiersOnly || (target.width > 20 && target.height > 20);}},

And xerath-power-drag.js don't work (for me) in Opera 9.27 because stored as utf with BOM.

Lex1 # 24. August 2008, 20:55

Other incompatibility:

function isBorderSizing(obj, cstyles){
if(!cstyles)
cstyles = getComputedStyle(obj,'');
//kestrel bug: computed box-sizing is an empty string
var backcompat = (document.compatMode == 'BackCompat');
var bsz = cstyles.boxSizing || obj.currentStyle.boxSizing;

Opera 8 don't support currentStyle, therefore better write:

var bsz = cstyles.boxSizing || (obj.currentStyle && obj.currentStyle.boxSizing);

or maybe:

var bsz = cstyles.boxSizing || getComputedStyle(obj,'').boxSizing;

Now a script will be works in any version of Opera

xErath # 26. August 2008, 00:35

power-drag: New version up
1.0.4

Better heuristic (Opera bug workaround) to guess the element's box model
Better support for select boxes

I also encoded the file in ANSI, no need to have this one in utf

Lex1 # 26. August 2008, 09:13

Thanks. But now images and other elements jump to the right, on mouse hover.

WOFall # 26. August 2008, 13:04

Ok, I'll have to pass on this one due to the (quite noticable) preformance differance. Also, the drag box ends up beside the image a lot of the time, and, as pointed out above, images jump.

And you forgot to change the version in the js file? Mabye I've just downloaded the wrong version afterall?

Waiting for next version

xErath # 26. August 2008, 16:12

Originally posted by Lex1:

But now images and other elements jump to the right, on mouse hover.

Fixed.

Originally posted by WOFall:

I'll have to pass on this one due to the (quite noticable) preformance differance

Could you elaborate ? It seems fine for me.

Originally posted by WOFall:

And you forgot to change the version in the js file? Mabye I've just downloaded the wrong version afterall?

eh, fixed

xErath # 26. August 2008, 19:06

More another release.
1.0.5

performance fixes

and those bugs you reported are fixed too.

WOFall # 27. August 2008, 15:29

I'll take this one

By performance, i meant that resizing (most?) images was slow and jumpy. It seems fine with your latest release

Keep it up!

Lex1 # 27. August 2008, 16:54

Yes bug with «right jump» now fixed, thanks.
But exists another bug. Go to test page and scroll page at bottom.
A lower picture will do scroll of page, on mouse hover.

Lex1 # 13. September 2008, 20:49

xErath
Hmm.. What about fixing? You must save position of scroll after the change of size of element (obj.style.width = '200px').

xErath # 15. September 2008, 22:23

Sorry for the delay.
New Release
Another bug fix up, version 1.0.6.
Things should stop jumping for some people now (they didn't for me).

Lex1 # 16. September 2008, 10:26

xErath
Many thanks, now all OK.

Pure_BY # 26. October 2008, 22:28

Thanks for updates, power-drag is working much faster on my machine now.

But could you please make a version, where power-drag would work without having to hold shift down (the way it worked in the older version of your script, and the way it works in Safari), please?

xErath # 26. October 2008, 23:47

Originally posted by Pure_BY:

But could you please make a version, where power-drag would work without having to hold shift down (the way it worked in the older version of your script, and the way it works in Safari), please?

You can do it yourself

! Just change this line

var enableOnModifiersOnly = true;

var enableOnModifiersOnly = false;

Pure_BY # 27. October 2008, 00:00

Never knew that! Thanks so much once again :-)

Pure_BY # 28. October 2008, 19:39

Hm, the problem with "var enableOnModifiersOnly = false;" setting is that the “drag corner” appears in many unnecessarary places on mouse hover, e.g. on a lot of images, etc. That irritates a lot, so I've changed the setting back to "true".
Could you make it so that in future versions of the script the “drag corner” will apply only to textareas when above setting is set to "false"?

xErath # 30. October 2008, 00:25

Originally posted by Pure_BY:

Could you make it so that in future versions of the script the “drag corner” will apply only to textareas when above setting is set to "false"?

You can again disable it for everything but input fields.
Replace from line 80 to line 114 (included) with

var validTargets = [
    {nodeName:'textarea',resizeh:true,resizev:true},
    {nodeName:'input',resizeh:true,resizev:false,
        validate:function(target){return !(/^(button|reset|submit|radio|checkbox|image)$/i).test(target.type) ? this : null;}}
];

Chas4 # 13. January 2009, 00:58

thanks

xErath # 5. February 2009, 00:52

New italian translation of power-meenoo for those of you interested. Have fun !

xErath # 8. February 2009, 23:38

Bug fix for resizing select boxes with power-drag uploaded

Chas4 # 8. February 2009, 23:41

xErath does that mean a new version?

if so can you put a date next to the download links?

GwenDragon # 9. February 2009, 08:58

>Bug fix for resizing select boxes with power-drag uploaded

Thanks for the bugfixing of "my" bug

Micky # 11. February 2009, 23:59

Is it possible to make power-drag work on Youtube?

Art-Roman # 10. March 2009, 19:44

wow, it's brilliant!!! Power-Drag is a good surprise after using the Safari )))

Lex1 # 10. March 2009, 22:45

Request. Proportional resize images.
It will good replacement, for old zoom-image.user.js

purgossu # 13. March 2009, 14:42

Nice JS. Thanks!

Creat0R # 25. October 2009, 14:22

Is there any way to use this script for web-sites? I only need the textarea resizing functionality. I have tried to add the script to page header (to load it), but it's not working in other browsers

xErath # 25. October 2009, 17:17

It won't work in IE because it lacks dom 2 events support, but that's easy to work around.
Apart from that, I should work in Gecko and webkit browsers, but you won't see the knob because you need to replace "background: -o-skin("Scrollbar Grip");" with a real image.
If you're doing to include it on a website, then please remove the opera.addEventListener part, else it will not work in Opera considering those functions only work if used from user scripts.

Creat0R # 29. October 2009, 21:03

It won't work in IE because it lacks dom 2 events support, but that's easy to work around.

Can you please tell me how?

you need to replace "background: -o-skin("Scrollbar Grip");" with a real image.

Ok, will do, thanks.

If you're doing to include it on a website, then please remove the opera.addEventListener part, else it will not work in Opera considering those functions only work if used from user scripts.

I managed to make it work on Opera, but not other browser

xErath # 29. October 2009, 23:33

Originally posted by Creat0R: