Examples of Using the Resizing Mechanism

Now that you understand how to use the resizing mechanism, let’s look at some resizing examples.

Displaying Dimensions of the Element When Resizing

We can use the resize event to determine the effect of every mouse movement during a resizing operation (see Figure 13-3):

Displaying element dimensions when resizing

Figure 13-3. Displaying element dimensions when 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;">
     Resize me!
</p>

<hr />

<span id=result></span>

<script>

$("p").resizable ({
  resize : function (event, ui)
  {
    $("#result").text ("width = " + ui.size.width +
                    ", height = " + ui.size.height);
  }
});

</script>

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; ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.