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