O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required