Summary

In this chapter, we covered the resizable. This is a component that allows us to easily resize any on-screen element. It dynamically adds resize handles to the specified sides of the target element and handles all of the tricky DHTML resizing for us, neatly encapsulating the behavior into a compact, easy-to-use class.

We then looked at some of the configurable options that we can use with the widget, such as how to specify which handles to add to the resizable, and how the minimum and maximum sizes of the element can be limited.

We briefly looked at how to maintain an image's aspect ratio, or how to work with custom ratios, while it is being resized. We also explored how to use ghosts, helpers, and animations to improve the usability and appearance of the resizable component.

We also looked at the event model exposed by the component's API and how we can react to elements being resized in an easy and effective way. Our final example explored resizable's compatibility with other components...