resizable not working from 2nd click
Question
resizable not working from 2nd click can you explain me why? In the below code, actually i am trying to add shirt and pant to the div. and when they are added, I have to resize them so i have even added resize button. Resize is working for the first time and when ever we try to add another shirt or pant. resize is not working. May i know the reason and help me out in finishing this project.
<html lang="en">
<head>
<title>Outfit Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
// sets draggable the elements with id="shirt"
$('#shirt').draggable({
cursor: 'move', // sets the cursor apperance
containment: '#leftpanel' // sets to can be dragged only within its parent
});
// sets draggable the paragraph inside #trousers
$('#trousers').draggable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#btn').click(function() {
// removes all LI with class="cls" in OL
$('#shirt').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#trousers').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
});
});
var shirt;
var pant;
function selectshirt(src)
{
shirt = src;
path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
invisible("middlepanel");
visible("rightpanel");
document.getElementById("shirt").innerHTML=path;
document.getElementById("cart").style.visibility="visible";
}
function selectpants(src)
{
pant = src;
path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
document.getElementById("trousers").innerHTML=path;
}
function addtocart()
{
alert("Shirt:"+shirt+"\npant:"+pant);
}
function changeshirt()
{
visible("middlepanel");
invisible("rightpanel");
}
function changepant()
{
visible("shirtcontainer");
invisible("pantcontainer");
}
function visible(containername)
{
document.getElementById(containername).style.visibility="visible";
}
function invisible(containername)
{
document.getElementById(containername).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
<div id="shirt" style="left:0;height:300px;width:300px;"></div>
<div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div>
<div style="left:0;height:70%;" id="cart">
<button onclick="changeshirt()">Change Shirt</button>
<button onclick="addtocart()">Add to cart</button>
<button id="btn">Resize</button>
</div>
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="shirtcontainer">
<img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
</div>
</div>
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="pantcontainer">
<img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
</div>
</div>
</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>
Please help me in this and make rezizable working from 2nd click also.
2 answers
solution1
0 ACCPTED 2013-02-28 11:36:08
First of all I'm sorry because I'm on my iphone and it's quite hard to read your code.
However there could be some problems:
1)you don't refresh the resizable element,may try to reinitalize the plugin function
2) you are trying to resize a duplicated id.
3) if you are adding to append something and you want to use a click function or similar you have to bind it with $(document).on(event,element,function(){})
Brutal Solution
Destroy and reinitalize the element
solution2
0 2013-03-01 01:46:38
@Dheed Thanks for the solution. As you said , i have tried destroying it and reinitialized
$("#shirt").resizable("destroy");
$("#shirt").resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
This worked for me.
Thank you so much Dheed
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.