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.

Marras

Here's a slightly different way of doing it: https://mcmap.net/q/347249/-how-can-i-resize-a-div-by-dragging-just-one-side-of-it – Conduit

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..

Adventist

Yes, that fixed it! Thanks a lot, I had a feeling I needed a preventDefault() in there somewhere! – Marras

Sidenote: Float and absolute position does not live together. W3C 9.7 Relationships between 'display', 'position', and 'float' "if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'..." – Taka

excellent question and splendid reply. Should anyone see this, though, any pointers to how I can prevent the draggable going "off page" when dragged to the extreme left or right? And how I can set min-width and max-width on sidebar and main? – Arnelle

@boblet you can use some limits in the script.. something like jsfiddle.net/Bek9L/1530 – Adventist

@GabyakaG.Petrioli you are the bees knees, works like a charm! Thank you for your time, and many many thanks! – Arnelle

@Gaby aka G. Petrioli: Great demo, but can we make it keyboard accessible? – Bramante

Answer 2

Use event.preventDefault.

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

Maybe you need to call it in mousemove too.

Conny