Animating Position Changes

The jQuery UI position utility is about doing math. Specifically, it's performing translations for us, from human-readable position coordinates, into something the browser can understand. Obviously, this is a powerful tool to have at our disposal while doing UI development. I use it all the time. And not just to position elements as the page first loads, also in response to user events. It's this latter scenario where I would like to animate the change in position. The position utility provides an entry point for us to do that.

Position Dialog Based On Click Events

With the jQuery UI dialog component, you can specify where you would like it positioned, when opened. For example, in the call to create the dialog instance, you might pass the position option. By default, the dialog opens automatically, and so if you need the default position changed, you have to specify the custom position when the widget is first instantiated.