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.

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.

• javascript
• jquery
• resize

• Why doyou have blank selectors for the bind and unbind? Should they be $(this).bind/unbind? – roborourke Commented Feb 9, 2009 at 9:43
• 1 Have you thought of using the jQuery UI and resizable? – Jay Commented Feb 9, 2009 at 11:46
• Agreed, grab jQuery UI and use resizable. If you're worried about size, you can just grab the individual bits of the UI library, you don't need the whole lot. – stusmith Commented Feb 9, 2009 at 14:39
• I am aware that I can use jQuery UI, but I only want to build a single resizable control. Even minified, jQuery UI's resizable alone adds 26kb. – JC. Commented Feb 10, 2009 at 9:51
• 3 25kb seems like a reasonable price to pay for a working version that's going to be supported and updated with future versions. – acrosman Commented Feb 21, 2009 at 3:21

3 Answers 3

Try adding

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

to the end of your mouseup function.

i was occasionally able to break the resize functionality, where i would get the "not allowed" cursor and the box would not dynamically resize, although when i let go of the mouse it would resize appropriately and stay that way.

adding return false; to the end of the resize function seems to stop the browser from trying to select/drag the resize bar. i'm working in a limited environment so i can only test with ie8 (and ie8 in ie7 mode).

i had to replace your calls to $() with $(document) to get this working. i would also remend moving the mousemove binding out of the mousedown handler, and removing the unbinding call.

This is an example with a "hr" tag as separator (between 2 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;
}