Build jQuery UI Resizable - Delay start in JavaScript
Description
The following code shows how to build jQuery UI Resizable - Delay start.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Delay start</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!-- w w w.j ava 2 s . co m-->
<style>
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
delay: 1000
});
$( "#resizable2" ).resizable({
distance: 40
});
});
</script>
</head>
<body>
<h3 class="docs">Time delay (ms):</h3>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Time</h3>
</div>
<h3 class="docs">Distance delay (px):</h3>
<div id="resizable2" class="ui-widget-content">
<h3 class="ui-widget-header">Distance</h3>
</div>
<div class="demo-description">
<p>Delay the start of resizing for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
</div>
</body>
</html>
The code above generates the following result.
Javascript Tutorial Resizable
Add knobHandles for resizable in JavaScript
Build jQuery UI Resizable - Animate in Java...
Build jQuery UI Resizable - Constrain resiz...
Build jQuery UI Resizable - Default functio...
Build jQuery UI Resizable - Maximum / minim...
Build jQuery UI Resizable - Preserve aspect...
Build jQuery UI Resizable - Snap to grid in...
Build jQuery UI Resizable - Synchronous res...
Build jQuery UI Resizable - Textarea in Jav...
Build jQuery UI Resizable - Visual feedback...
Create an Animated resizable in JavaScript
Get resized height and width in JavaScript
Set max Width, max Height, min width and mi...
Set the handles for all directions in JavaS...
Set to use ghost for your resizable div ele...
Add knobHandles for resizable in JavaScript
Build jQuery UI Resizable - Animate in Java...
Build jQuery UI Resizable - Constrain resiz...
Build jQuery UI Resizable - Default functio...
Build jQuery UI Resizable - Delay start in ...
Build jQuery UI Resizable - Helper in JavaS...Build jQuery UI Resizable - Maximum / minim...
Build jQuery UI Resizable - Preserve aspect...
Build jQuery UI Resizable - Snap to grid in...
Build jQuery UI Resizable - Synchronous res...
Build jQuery UI Resizable - Textarea in Jav...
Build jQuery UI Resizable - Visual feedback...
Create an Animated resizable in JavaScript
Get resized height and width in JavaScript
Set max Width, max Height, min width and mi...
Set the handles for all directions in JavaS...
Set to use ghost for your resizable div ele...