JQuery Resizable DIV Editor

Question

I am trying to create a resizable div without using the jQuery 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 size changes perfectly (i.e. mousedown, mousemove then mouseup), but at the subsequent (mousedown + mousemove) s, the browser tries to drag the entire divizeBar div instead of resizing its parent container correctly. In mouse mode, the div then starts resizing "cooldiv" to mousemove without the need for mousedown until the next mouse click.

These problems do not appear in Internet Explorer.

Answer 1

Try to add

 $("#cooldiv").focus(); 

to the end of your mouseup function.

Answer 2

I sometimes had to disrupt the resizing functionality, where I would get an “invalid” cursor and the box would not change dynamically, although when I let go of the mouse, it would resize accordingly and stay that way.

adding return false; at the end of the resize function, it does not seem to allow the browser to select / drag the resize panel. I work in a limited environment, so I can only test with ie8 (and ie8 in ie7 mode).

I had to replace your calls on $() with $(document) to make this work. I would also recommend moving the mousemove binding from the mousedown handler and removing the non-binding call.

Answer 3

This is an example with the "hr" tag as a separator (between two divs):

 <div>Text here</div> <hr /> <div>Other text</div> 

Javascript: (using jQuery):

 var hr = null; $("hr").mousedown(function(e) { hr = { y : e.pageY, p : $(this).prev(), n : $(this).next(), ph: $(this).prev().height(), nh: $(this).next().height() }; e.preventDefault(); }); $(document).mousemove(function(e) { if(hr) { hr.p.height(hr.ph+(e.pageY - hr.y)); hr.n.height(hr.nh-(e.pageY - hr.y)); } e.preventDefault(); }).mouseup(function(e) { hr = null; e.preventDefault(); }); 

CSS (optional):

 hr { background-color: #DDD; border: 1px solid #AAA; cursor: n-resize; height: 10px; }