jQuery UI Resizable stop Events

Last Updated : 26 Jan, 2022

jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we are going to learn the jQuery Mobile Resizable stop Events. This event is triggered at the end of a resize operation

Syntax:

Initialize the collapsible with the create callback specified.

$( ".selector" ).resizable({ stop: function( event, ui ) {} });

Bind an event listener to the resizestop event.

$( ".selector" ).on( "resizestop ",function( event, ui ) {} );

Parameters: These are the following parameters that are accepted:

event: This event is triggered at the end of a resize operation.
ui: This parameter is of type object with below-given options.
- helper: This parameter is the jQuery object representing the helper that’s being resized.
- element: This parameter is the jQuery object that represents the element to be resized.
- size: This parameter is the current size of the helper object which is represented as { width, height }.
- position: This parameter is the current position of the helper object which is represented as { top, left }.
- originalPosition: It is the original position of the helper object which is represented as { top, left } before resizable is resized.
- originalSize: It is the original size of the object which is represented as { width, height } before the resizable is resized.
- originalElement: This parameter is the original element before it is wrapped.

CDN Links: Add the following jQuery Mobile scripts that you will need in your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>

Example: This example describes the uses of the jQuery UI Resizable stop Events.

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src= 
"https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src= 
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
    <style> 
        h1 { 
            color: green; 
        } 
  
        .container { 
            width: 320px; 
        } 
  
        #resizable-div { 
            width: 300px; 
            height: 150px; 
            text-align: center; 
            border: 2px solid black; 
        } 
    </style> 
    <script> 
        $(function () { 
            $( "#resizable-div" ).resizable({ 
                stop: function( event, ui ) { 
                    $("#gfg").html("Resizable Widget has been Stopped"); 
                } 
            }); 
        }); 
  
        $(function () { 
            $("#resizable-div").resizable(); 
            $("#resizable-div").resizable('enable'); 
        }); 
    </script> 
</head> 
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h3>jQuery UI Resizable stop Events</h3> 
  
        <div class="container"> 
            <div id="resizable-div"> 
                <h3 class="gfg"></h3> 
            </div> 
        </div> 
        <br> 
        <h4><span id="gfg"></span></h4> 
    </center> 
</body> 
</html>