Allow live resizing in the resize example.

examples/resize/index.html

@@ -4,16 +4,10 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Flot Examples: Resizing</title>
 	<link href="../examples.css" rel="stylesheet" type="text/css">
-	<style type="text/css">
-
-	.message {
-		padding-left: 50px;
-		font-size: smaller;
-	}
-
-	</style>
+	<link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
 	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
 	<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
+	<script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
 	<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
 	<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
 	<script type="text/javascript">
@@ -39,6 +33,13 @@
 				+ $(this).width() + "x" + $(this).height()
 				+ " pixels");
 		});
+
+		$(".demo-container").resizable({
+			maxWidth: 900,
+			maxHeight: 500,
+			minWidth: 450,
+			minHeight: 250,
+		});
 	});
 
 	</script>
@@ -49,9 +50,9 @@
 		<h2>Resizing</h2>
 	</div>
 
-	<div id="content" style="width:100%;">
+	<div id="content">
 
-		<div class="demo-container" style="width:100%;">
+		<div class="demo-container">
 			<div id="placeholder"></div>
 		</div>
 
@@ -59,8 +60,7 @@
 
 		<p>Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.</p>
 
-		<!--<p>Drag the handles at the bottom and right of the plot to resize it.</p>-->
-		<p>Try resizing the window.</p>
+		<p>Drag the bottom and right sides of the plot to resize it.</p>
 
 	</div>
 

examples/shared/jquery-ui/jquery-ui.min.css

+/*! jQuery UI - v1.10.0 - 2013-01-26
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.resizable.css
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}
\ No newline at end of file