vikrant vikrant - 1 month ago 15
CSS Question

resizable attribute of jquery is not working

I have written a code for image drag and resizing with jquery.
i can drag the image but i am unable to do image resizing .PLease help me what mistake i have did in resizing.
I have written my code below.



$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$("#action").resizable({
handlers: "all",
ghost: true
});
});

#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themses/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>
<div id="limits">
<div id="action">
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img.jpg" class="image">
</div>
</div>




Answer

remove s from themses in jquery-ui.css link

<!DOCTYPE HTML>
<html>

<head>
   <meta charset="utf-8">
   <title>Dynamically resize image</title>
   <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>
   <link rel="stylesheet" href="/resources/demos/style.css">
   <script type="text/javascript">
      $(document).ready(function() {
         $("#action").draggable({
            cursor: "move",
            containment: "parent"
         });
         $(".image").resizable({
            handlers: "all",
            ghost: true
         });
      });
   </script>

   <style>
      #action {
         background-color: #aaa;
         height: 200px;
         width: 200px;
      }
      #limits {
         background-color: lavender;
         height: 300px;
         width: 300px;
      }
      .image {
         height: 200px;
         width: 200px;
      }
   </style>
</head>

<body>
   <div id="limits">
      <div id="action" style="display:inline-block"><img src="http://www.w3schools.com/images/w3schools_green.jpg" class="image"/></div>
   </div>
</body>

</html>