Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

Question

I'm converting a site for a client from a frameset to divs. One feature that the client has is a sidebar that can be resized depending on how much space the user needs. Using frames the resizing of this sidebar was built in. However, I'm having some difficulty emulating this capability in jQuery.

I don't wish to use jQuery UI to do this, I have no need for all the extra functionality that the UI suite provides, and would rather just write a few lines of code to take care of this.

I only need to resize in the horizontal plane, vertical dimensions are fixed.

Currently I have a solution that (sort of) works. The sidebar div can be resized, but only if a user clicks on the resizable div, drags the mouse, then clicks on the div again (to remove the mousemove event).

The experience I want is this: A user hovers over the resizable div, presses the mouse button down, then drags the div to be larger/smaller, and releases the button.

The problem I'm having is this: If a user clicks on my resizable div, then tries to drag it to make it smaller/larger, the mouse becomes the "no" icon, and there is a transparent version of my div that is drug around with the mouse.

Perhaps this is better explained by checking out my code:.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

and HTML:

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

Here is a temp webpage with the basic layout working:

http://pastehtml.com/view/1crj2lj.html

The problem can be seen if you try to resize the thing labeled "sidebar" using the brown bar.

Answer 1

Look at http://www.jsfiddle.net/gaby/Bek9L/

I changed the #main area to be left:200px (and no width).
Added e.preventDefault() on the mousedown to avoid the selection of text to occur.
In the code i alter the left property of the #main as well so both sides move..

---

Not sure what you problem really is, but what is see is that the #sidebar was resized but was going underneath the #main and so the #dragbar disappeared..

Answer 2

Use event.preventDefault.

$('#dragbar').mousedown(function(e){
   e.preventDefault();
   // ...
});

Maybe you need to call it in mousemove too.