On the client side, JavaScript, can any element except the window receive a resize event?

Question

I get a few pages saying that the resize event can be in a body or div element:

http://www.w3schools.com/jsref/event_onresize.asp

http://v3.javascriptmvc.com/docs/jQuery.event.special.resize.html#&who=jQuery.event.special.resize

but then I tried it in jsfiddle or on a separate page and could never get a resize event for the element:

http://jsfiddle.net/sgHck/1/

http://jsfiddle.net/sgHck/8/

Can a body or div get a resize event at all? If not, what should we do if we need to reduce the size of the section on the page, and part of the page depends on the scroll event to correctly place another element, and the resize event for the document, not the window, will also be necessary?

Answer 1

Having rummaged a little, it seems that they can change the size of events not quite as you want.

You can add a resize event like this

 $('#content').resize( function(){ //stuff to do } 

or

 $('#content').on('resize', function(){ //stuff to do } 

which you already do, but they just don't work when the elements change by javascript code or something like that. the only way to invoke it this way is with

 $('#content').trigger('resize'); 

which you can really do with any string. It spreads through the tree of dominance. Let's say that you had #content inside the body with the "resize" event on both of them. If you call #content, it also calls the body. However, if you trigger an event with a body, it will not fire #content.

However, it looks like you can get the type of functionality you want using the jquery-ui resizable method http://jqueryui.com/resizable/ . After you do something mutable with

 $('#content').resizable({options}); 

it should trigger a resize event if they are resized.