Question

i’m trying to create resizable div element and i’m using jQuery. This is my code

HTML

<div class="leftBorder">
    <div id="dragbar"></div>
    <h2>Left</h2>
</div>

SCRIPT

$('#dragbar').mousedown(function(e) {
    console.log("Mouse down");
    e.preventDefault();
    $(document).mousemove(function(e) {
        $('.leftBorder').css("width", e.pageX + 2);
    });
});
$(document).mouseup(function(e) {
    $(document).unbind('mousemove');
    console.log("Mouse up");
});

CSS

.leftBorder {
    width: 300px;
    float: left;
}
#dragbar {
    background-color: black;
    height: 100%;
    float: right;
    width: 3px;
    cursor: col-resize;
}

But when i click on my dragbar nothing happens? What am i doing wrong?

Answer 1

$('#dragbar').mousedown() is binding a function (your anonymous function that you pass in) to the mousedown event on the dragbar element. Is this binding actually happening? The normal pattern would be to have

$(document).ready(function() {
  $('#dragbar').mousedown();
});

to make sure the event gets bound.

Is there anything inside your div that you can click on? I would say it’s worth a shot adding some nonsense in there like a <p>test</p> to make sure there’s an obvious visible element to click on to make sure that the event is in fact failing to fire, and it’s not just that you’re missing the div entirely.