Question

I’m using Jquery UI to allow the user to resize a div with a video player in it.
This is a excerpt of the 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 rendered. The problem is when I trigger an event that changes the contents of the “#stream” div with:

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

After doing this the resize controls disappear and even if I invoke $("#stream").resize() again is does not seem to work.

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

Answer 1

The widget will still operate under the parameters you specified on creation, even if #content itself changes. You can either completely destroy the 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 its operating parameters:

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