How to resize div using jQuery UI after changing its contents?

Question

I am using JQuery UI to allow the user to resize divs using a video player. This is a piece of code:

<script type="text/javascript"> $(function(){ $("#stream").resizable({ containment: "#content", minHeight: $('#content').height(), maxWidth: ($('#content').width() / 1.3) }); }); </script> <div id="stream"> <!-- Flash video player stuff --> </div> 

This works as expected when the page is displayed. The problem is that I fire an event that changes the contents of the div "#stream":

 #('#stream').html(<--!Code for another video player-->); 

After that, the size controls disappear, and even if I call $("#stream").resize() again does not seem to work.

Am I doing something wrong or do I need to use some kind of work?

Answer 1

The widget will still work under the parameters specified during creation, even if #content itself changes. You can completely create the destroy widget and recreate it:

 $("#stream").resizable("destroy").resizable({ containment: "#content", minHeight: $("#content").height(), maxWidth: $("#content").width() / 1.3 }); 

Or, less intrusively, use the option method to update your operating parameters:

 $("#stream").resizable("option", { minHeight: $("#content").height(), maxWidth: $("#content").width() / 1.3 }); 

Answer 2

You can add an extra element to #stream for example

 <div id="stream"><div class="cnt"></div></div> 

and refresh the contents by calling

 $('#stream div.cnt').html(<--!Code for another video player-->);