I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left.
<div class="wrapper">
<div class="demo"></div>
<div class="demo2"></div>
</div>
<STYLE>
.demo {
float: left;
width: 50%;
height:100%;
background-color: red;
}
.demo2 {
float: left;
background-color: black;
width: 50%;
height:100%;
}</STYLE>
<script type="text/javascript">
(function(){
maxWidth=$('.wrapper').width();
$('.demo').resizable(function(e){
var x = e.pageX;
alert(x);
$(this).width(x);
$('.demo2').width(maxWidth-x);
});
})()
</script>
However, the width of demo2 does not adjust automatically as desired when dragging demo1. Can anyone help me identify what is wrong in my code?