how do you make resizeable work in jquery

Question

I have bunch of divs that I would like to set it to resizable but I don't seem to get it work:

I have included the following on my page:

<link rel="stylesheet" href="js/jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $( "#popup_box" ).draggable();
    $( "#app1_cpu" ).draggable();
    $( "#app1_cpu" ).resizable();
});
</script>

draggable is working but not resizeable () any ideas what I might missing here?

here is the fiddle: http://jsfiddle.net/gsaray101/RveaK/3/

looks like the chart is covering the resizable image. Any ideas how could move the resizable image outside of the div?

Answer 1

Your coding working fine. Maybe some JS file conflict.

Better try using links:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Check JSFiddle.

Answer 2

If you want the id #app1_cpu to be both draggable and resizeable, try doing this:

 $("#app1_cpu").draggable().resizable();