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>
Output:
jQuery UI Resizable stop EventsReferences: https://api.jqueryui.com/resizable/#event-stop
Similar Reads
jQuery UI Resizable start Events jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable start event is triggered when the resize operation is started. Syntax: Initializing the resizable start event
2 min read
jQuery UI Resizable resize Events jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable resize event is triggered during the resize operation. Syntax: Initializing the resizable resize event. $( ".
2 min read
jQuery UI Sortable stop Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. The jQuery UI Sortable stop
2 min read
jQuery UI Selectable stop Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. The jQuery UI Selectable st
2 min read
jQuery UI Slider stop Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget. The slider widget helps us to get a certain value using a given ran
2 min read