1

As the title says, the jQuery event resize() is not firing when the width of a input box changes. According to the jQuery API documentation, resize event is sent to the (window) handler. So my question is, what other solution do I have to listen to a resize event.

I'm currently using the transition attribute in CSS, rather than using jQuery animate to alter the inputs width. It's much cleaner and smoother in CSS, so I would like to keep it like so. If anyone has any other solutions, please list them below.

My first attempt was something like this

$('input').resize(function() {
    $(this).val('Resize? Nope!');
});

Here is a fiddle for the resize event: http://jsfiddle.net/Yw9CT/

user0000001
  • 2,092
  • 2
  • 20
  • 48
  • In full, the sentence reads "The resize event is sent to the window element when the size of the browser window changes:", and the example is `$(window).resize(function() {...}`. There is no resize event associated with input elements - reason being, they are not naturally resizable, except (subject to CSS directive) by resizing the window. – Beetroot-Beetroot May 18 '13 at 19:01
  • 1
    http://benalman.com/projects/jquery-resize-plugin/ – Ram May 18 '13 at 19:01
  • Thank you to the poster above. I'll be taking a look at this, but it seems though that it may or may not be out of date. Thank you! – user0000001 May 19 '13 at 04:26
  • Could you not just use jQuery `hover()` in the situation demonstrated in your jsFiddle? Because if `resize()` worked, it would fire after the input was 1px wider (i.e. almost immediately). – Alex W May 19 '13 at 18:12

2 Answers2

0

The resize() method in jQuery is for elements that can be manually resized by the user. By resizing the element using javacript/jQuery, you are not firing any event...

You can either create your own event, or use a textarea.

UPDATE

After looking at your jsFiddle, this issue is very clear. You are resizing the input using a CSS3 method. This does not trigger any jQuery events, you would be better off handling the animation with jQuery.

Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • That I understand, hence why I said that I would like to keep using the CSS transition property then having to create a pseudo method in javascript. But it's starting to seem that using animate is my only hope. – user0000001 May 19 '13 at 04:23
0

You can listen to the transitionend event to find out when the CSS3 resize has completed.

Neil
  • 54,642
  • 8
  • 60
  • 72