Unable to get top and left value
<p>I am generating img tag dynamically then providing drag and resize functionality after that I am appending it to the container and then setting its position to the center of the container. This all work fine but after appending when i am retreving top and left position of above added img tag i am getting top 0 and left 0 . When i resize it once then I am getting proper position. Why this is happening .I am totaly cluless. Kindly help.</p>

<p>Below is the code </p>

<pre><code>    var img_clip = document.createElement('img');
    $(img_clip).attr("id", "dyndiv" + count);
    $(img_clip).attr("src", current_clip ) ;      
    $(img_clip).attr("width", 30);
    $(img_clip).attr("height",50);                                                                   
      var $ctrl = $(img_clip).resizable({ containment: '#containment-wrapper'}).parent().addClass("resizable").draggable({ containment: '#containment-wrapper', cursor: 'move',delay: 200,distance: 30, opacity: 0.35});
      objid = "dyndiv" + count ;
      $(img_clip).css("z-index" , $(img_clip).css("z-index") + count );
      $('#sel_obj_text').val("Image");
      count++;  
      $("#containment-wrapper").append($ctrl);
           $('#' + objid).parent().position({
                   of: $( "#containment-wrapper" ),
                   my: "center" + " " + "center",
                   at: "center" + " " + "center"
                                                 });
</code></pre>

<p>later in other piece of code I am trying to get position from below line</p>

<pre><code>   $(this).parent().css("left")
  $(this).parent().css("top")
</code></pre>
