Jquery UI Resizable with Custom Handles
I have a webpage with two columns and a customer resizable handle on the left column. The handle resizes the div correctly but it does not move with the resizing, it stays in it's original position throughout the resizing. I would also like the resizing to "push" the right column as it resizes the left column which it doesn't do. any help would be appreciated!
<html>
<div class="outer">
<div class="left">Left Column
<div id="resizer" class="ui-resizable-handle ui-resizable-e"></div>
</div>
<div class="right">Right Column</div>
</div>.left {
position:absolute;
left:20px;
top:20px;
background-color:#F1F1F1;
width:200px;
height:600px;
}
#resizer {
position:relative;
left:200px;
top:0px;
float:left;
background-color:#336699;
width:10px;
height:600px;
cursor:w-resize;
}
.right {
position:absolute;
left:230px;
top:20px;
width:300px;
height:600px;
background-color:#DDDDDD;
}<script>
var reposition = '';
$(document).ready(function() {
$( ".left" ).resizable({
handles: { 'e': '#resizer' },
resize: function(event, ui){
reposition = ui.position;
}
});
});ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER