Displaying the Position of the Element When Resizing

The position of the element is normally fixed on the page. However, this position may change if the element is scaled by its top or left sides. This implies that its top and left coordinates are then modified, therefore, its position on the page changes. Use the following to display position coordinates during resizing:

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<p style="background-color:gainsboro; width:150px;
          position:absolute;top:100px;left:100px">
     Resize me!
</p>

<span id=result></span>

<hr />

<script>

$("p").resizable ({
  handles : "n, e, s, w, ne, se, nw, sw",
  resize : function (event, ui)
  {
    $("#result").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
  }
});

</script>