Image deminsion issue with jquery resizable

Question

The below code creates an image when the button is clicked on. You can see the image created in firebug DOM. But height and width is 0px. Image dimensions is not being detected.

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">
</script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript">
</script>
<button style="width:100px; height:30px;">test</button>
<p style="height:400px; width:500px;border:2px solid red;"></p>

    <script type="text/javascript">
var spanid = 1;
$("button").click(function() {
  var elm = $('<img id=spanId' + spanid + '  src="http://www.carsyouwilldrive.com/wp-content/uploads/2009/06/futurecar1.jpg"/>');
  elm.resizable().parent().draggable({
    cursor: "move"
  }).appendTo('p');
  spanid++;
});</script>

Answer 1

This is because .resizable() calculates the initial size based on the target. In your case, you are making the image resizable before appending it to the DOM, and as such the size of the image is not known since it hasn't been loaded yet, which results in a size of 0.

If you append the image before making it resizable it should work just fine. Like this:

var spanid = 1;
$("button").click(function() {
  var elm = $('<img id=spanId' + spanid + '  src="http://www.carsyouwilldrive.com/wp-content/uploads/2009/06/futurecar1.jpg"/>');
  elm.appendTo('p').resizable().parent().draggable({
    cursor: "move"
  });
  spanid++;
});

Also, I recommend you to disable the browsers default image drag and selection. You can do this by adding .disableSelection() (currently undocumented) to your image element.