How to check when a div resizes, using Javascript or Jquery

Question

So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being:

• Fig. #1 User creates new 'text-field' element (a div with a max-width.) User then begins typing into said element until...

• Fig. #2 The element reaches it's max-width, the text drops to a new line and a 'new' background image (in the form of another div) is created (with it's opacity and position animated for effect) to accommodate the larger element sze.

This is a rough outline of the intended functionality (given at this moment, I'm not sure how to have a text-field that behaves like a div with max-width yet) but I'm curious about how to create the event handler for the 2nd step; I thought about checking on every 'keydown' event, but that seems inefficient...

Does anyone have any advice or ideas for tackling something like this? Thanks!

Answer 1

In MSIE an onresize should fire.

Answer 2

Not sure how to attack the width issue where an input field auto sizes untill max width then wraps. You could use a monospace font inside the text field so that you could use javascript to monitor and control the growth of the box horizontally uptill the max width.

To approach the height auto grow you would be better using a textarea with it set to one row to begin with so it looks like an input box and then when the text auto wraps to the next row, which it will do, you can check the scollHeight of the textarea and check the actual height of the textarea, subtract them and you get the height you need to grow the textarea to stop the vertical scroll bars appearing.

The above will make the scroll bars flick on and off briefly while your javascript does it magic. You can use overflow:auto; to hide the scroll bars but then I don't know if scrollHeight will still read correctly. You will need to experiment.

Also take note on my comment above about setting an interval on keydown and checking the input length to stop the repeating key down text issue.

Answer 3

You could try using the CSS3 transition functionality:
http://slides.html5rocks.com/#slide42
That way the elements you want can be animated by the browser itself.

Disclaimer: Obviously, this doesn't work with more complicated effects.

Answer 4

The 'keydown' or 'keyup' event is the first thing that comes to mind. If you decide to do it this way you will have to check for the html elements size each time and compare it to the old (save in a variable) one.

Easiest way seems to be to bind a handler to the html element and let it fire when the size changes. I do not know if such an event exists, but if then thats the way to go.

(+1 for your very descriptive Question)