CODEWITHSUNDEEP
jqueryhtmlcss
Jimmery
Jimmery

Reputation: 10139

Textarea: Apply a style on resize

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.

Upvotes: 0

Views: 495

Answers (3)

Shiva Avula
Shiva Avula

Reputation: 1836

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

Upvotes: 2

Ashwini Verma
Ashwini Verma

Reputation: 7525

you can try this..

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

http://jsfiddle.net/gR9UV/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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!');
    }
});

Upvotes: 3

Related Questions