Like other components of the library, resizable defines a selection of custom events and allows us to easily execute functions when these events occur. This makes the most of interactions between your visitors and the elements on your pages. Resizable defines the following callback options:
Option |
Triggered |
---|---|
|
When the resizable is in the process of being resized |
|
When the resize interaction begins. |
|
When the resize interaction ends. |
Hooking into these custom methods is just as easy for resizables as it has been for the other components of the library we have looked at. Let's explore a basic example to highlight this fact. In resizable13.html
change the second <link>
to point to a new stylesheet as follows:
<link rel="stylesheet" type="text/css" href="css/resizeStop.css">
Then change the final <script>
element so that it appears as follows:
<script type="text/javascript"> $(function() { function reportNewSize() { ...