Textarea: Apply a style on resize

Question

I have a textarea on my page, with resize:both;

I want to be able to apply a style to that textarea only when the user resizes it. Preferably I would like to be able to do this with CSS, but I dont think there is a pseudo-selector or method that would work with just pure CSS. Am I wrong?

Failing this, is there an event I can make use of in jQuery?

And what would be the best way of reseting the textarea to its original size? Would this be with jQuery again?

Many thanks.

http://stackoverflow.com/questions/5570390/resize-event-for-textarea — Arun P Johny, Feb 11 '14 at 11:39
All the answers are going wrong, she wants to apply style only when resize event is carried on — Mr. Alien, Feb 11 '14 at 11:41
@NoobEditor that's why I mentioned answers, and great, even you posted one.. — Mr. Alien, Feb 11 '14 at 11:45
@Mr.Alien : i had doubt on my answer...-1 nailed the doubt, so deleted it...answering back after a gap can be difficult!! :) — NoobEditor, Feb 11 '14 at 11:47
Did you guys check my answer. Do you want me to update anything there. — Shiva Avula, Feb 11 '14 at 13:01
@ScriptShiva I am just weighing up the relative merits of using your jQueryUI solution and using A. Wolff's version without an additional library. — Jimmery, Feb 11 '14 at 13:44

score 3 · Accepted Answer · answered Feb 11 '14 at 11:45

3

Without using any other library, creating own resize event for textarea could be done like this:

DEMO jsFiddle

$('textarea').on({
    mousedown: function(){
        $(this).data('size', $(this).width + '*' + $(this).height());
    },
    mouseup: function(){
        if($(this).data('size') !=  $(this).width + '*' + $(this).height())
            $(this).triggerHandler('resize');
    },
    resize: function(){
        console.log('textarea resized!');
    }
});

answered Feb 11 '14 at 11:45

A. Wolff

74,033
9
94
155

1

although the jQueryUI resizable method is an excellent solution to this problem, I ended up using an adaptation of this code, so I'm going to mark you as correct. – Jimmery Feb 11 '14 at 14:58
1

@Jimmery I accept it. This is a nice solution. Unless you already use JqueryUI, i hope it would be a pain to load whole library for a single functionality. Anyway in future if you use it my answer might be helpful to you. – Shiva Avula Feb 11 '14 at 16:30

score 2 · Answer 2 · answered Feb 11 '14 at 12:00

You need to first make the textarea resizable before issuing the resize event. You can do that by using jQuery UI resizable() and inside it you can call the resize event.

CSS

.resizing {
    background: #f2f2f2;
    border: 1px solid #4cf;
}

JS

$("textarea").resizable({ // Making it resizables triggers resize associated events
    resize: function() {
        $(this).addClass('resizing'); // Add style while resizing
    },
    stop: function() {
        $(this).removeClass('resizing'); // Remove style after resize finishes
    }
});

Here is a DEMO

Ashwini Verma · Answer 3 · 2014-02-11T11:47:19.743

0

you can try this..

$("#mytextarea").resizable({
    resize: function() {
        $(this).css("resize","both");
    }
});

http://jsfiddle.net/gR9UV/

edited Feb 11 '14 at 11:47

answered Feb 11 '14 at 11:39

Ashwini Verma

7,477
6
36
56

1

You forgot to say that you need jQuery UI to get this to work. – TheYaXxE Feb 11 '14 at 11:43

Textarea: Apply a style on resize

3 Answers3