Defining resizable events
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 initialized |
|
The resizable is in the process of being resized |
|
A resize interaction begins |
|
A 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 the following screenshot shows how our page will look before <div>
fades away:
In resizable13.html
, change the second <link>
to point to a new stylesheet as follows:
<link rel="stylesheet" href="css/resizeStop.css">
Then change the final <script>
element so that it appears...