CODEWITHSUNDEEP
javascriptjqueryhtml
user2307545
user2307545

Reputation: 165

JQuery UI - .resizable not working

I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.

Here is a link to another question similar. Draggable and resizable in JqueryUI for an image is not working?

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>

<div id="draggableHelper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

<script type="text/javascript">

$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();

});
</script>
</body>
</html>

This is just a very basic example but when I run this the image is movable but is not resizable. Although as far as I can tell, it should definitely work.

In the link above at the bottom of the question there is a link to a working example. http://jsfiddle.net/8VY52/ The example is using jfiddle with this exact same HTML and javascript.

Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.

Thanks.

Upvotes: 14

Views: 32065

Answers (4)

Binson Selvin
Binson Selvin

Reputation: 1

As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You are missing the jquery-ui CSS file in your code

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

Demo: Plunker

Upvotes: 54

Modestas Stankevičius
Modestas Stankevičius

Reputation: 144

Complete working code would be. 

</head>
<body>

<div id="draggableHelper" style="display:inline-block">
     <div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
     </div>  
<script type="text/javascript">

$(document).ready(function(){

$('#image').resizable();
$('#image').draggable();

$('#image').resize(function(){
   $(this).find("img").css("width","100%");
   $(this).find("img").css("height","100%");
});
});
</script>

</body>
</html>

Upvotes: 1

amit
amit

Reputation: 260

This will work for you.

<div id="draggableHelper" style="display:inline-block">
     <div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
     </div>

Upvotes: 0

Related Questions