jQuery UI

Chapter 13. Resizing

To provide a full range of possibilities for manipulating objects on the page, jQuery UI allows us to resize each element of the page.

Basic Principles of Resizing

Suppose we want to write the HTML code to resize the text display on the screen, as shown in Figure 13-1.

Figure 13-1. Resized text

Here, we have a <p> element containing text (with a border), which can be resized using the mouse (by dragging the right side or the bottom, or by using the resize icon in the bottom right corner).

To allow resizing, we create a <p> element for the item we want to resize. All items displayed are resizable. In addition, we must state the original height or width of the element (required by Internet Explorer, except when one of them is already known, in the case of an image, for example).

And let’s not forget, of course, to indicate that the <p> element is managed by the jQuery UI resizable () method so that the resize icon appears at the bottom right corner of the item:

<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="border:solid 1px;width:150px">
   A paragraph containing text that resizes!
</p>

<script>

$("p").resizable ();

</script>

Formatting Content

The resizable () method displays an icon in the bottom right of the item to ...