jQuery Manual Resizable DIV
- by JC
Hi, I'm trying to create a resizable div without using jQuery's interface library.
var myY = 0;
var mouseDown = false;
var originalHeight = 0;
function resize(e){
if(mouseDown == true){
$("#cooldiv").height(originalHeight+e.pageY-myY);
}
}
$(document).ready(function(){
$().mouseup(function(e){
myY = 0;
mouseDown = false;
originalHeight = 0;
$().unbind("mousemove", resize);
});
$("#resizeBar").mousedown(function(e){
myY = e.pageY;
originalHeight = $("#cooldiv").height();
mouseDown = true;
$().bind("mousemove", resize);
});
});
...
<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>
The first resize works fine(i.e. mousedown, mousemove then mouseup), but on subsequent (mousedown+mousemove)s, the browser attempts to drag the whole resizeBar div instead of properly resizing its parent container. On mouseup, the div then starts resizing "cooldiv" on mousemove without any mousedown required, until a further click of the mouse.
These problems don't show up in Internet Explorer.
