21

I have a div nested inside another div which is used to display a settings console. The nested div has a fixed positioned inside the parent as follows:

Div arrangement

I'd like to add a draggable handle to the child div's left border so that the child div can be resized on the width. Do I need to add another very narrow div where the left hand border is positioned so that this can be dragged and the position recalculated to dynamically resize the child divs width property?

I'd rather stick to vanilla JQuery if possible rather than relying on JQuery UI.

QFDev
  • 8,668
  • 14
  • 58
  • 85
  • 1
    What's the problem of using jquery ui .resizable http://jqueryui.com/resizable/ ? and post the html and css code – Sbml Jul 25 '13 at 10:40
  • It's not a big problem, happy to use .resizable. I just wasn't sure how to get the JQuery UI package for just the methods I need rather than importing the whole UI library. – QFDev Jul 25 '13 at 10:43
  • 1
    You can choose only the methods that you want http://jqueryui.com/download/ – Sbml Jul 25 '13 at 10:44

5 Answers5

16

I think this is what you're looking for

handles: Which handles can be used for resizing.

Example: $( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS: 

$('.child').resizable({
    handles: 'n,w,s,e',
    minWidth: 200,
    maxWidth: 400
});

check this JSFiddle

EDIT: Solved the css issue, Updated fiddle

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • Thanks..I have something similar here: http://jsfiddle.net/boggey79/TdtMx/ Problem is the container jumps to the left on-drag (Chrome 28.0.1500.72 m) – QFDev Jul 25 '13 at 10:59
  • 1
    @QF_Developer I think you misattached the wrong fiddle. check this http://jsfiddle.net/YZX6B/11/ – Praveen Jul 25 '13 at 11:05
  • I'm getting the child jumping to the left on both your fiddle and mine when a resize is attempted. I see this in Chrome and IE...do you see this behaviour? – QFDev Jul 25 '13 at 11:08
  • @QF_Developer Yup I see it. check this fiddle, I think I fixed it. http://jsfiddle.net/YZX6B/12/ – Praveen Jul 25 '13 at 11:15
  • Looks good! You seem to have fixed this by targeting JQuery 1.91 and UI 1.92. I'm locked to JQuery 2.0 as it's defined at the application level, can I still target UI 1.91? – QFDev Jul 25 '13 at 11:23
10

This can be achieved pretty easily with vanilla jQuery so to speak. I suggest using a more efficient markup layout however, or you'll run in to some relative position/size issues.

I would use one container, and 2 children. In one of the children (the second one, or right side) will contain a handle that's transparent but a small width. For the jQuery, you'll just attach a mouse down event to that handle and adjust the sizes of the other children accordingly. Here's roughly how that will look.

HTML

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
    </div>
</div>

JavaScript

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left'),
        right = $('#right'),
        handle = $('#handle');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

JSFiddle

Austin Brunkhorst
  • 20,704
  • 6
  • 47
  • 61
3

Use the jQuery UI Resizable interaction, as mentioned in comment. Take a look at this example: http://jqueryui.com/resizable/#max-min

EDIT: To lock it down to only resizing the width, set the minHeight equal to maxHeight. That should probably do it.

Code from above example:

$(function() {
  $( "#resizable" ).resizable({
    minHeight: 250,
    maxHeight: 250,
    minWidth: 200,
    maxWidth: 350
  });
});

EDIT 2: For aplying handles any different ways: read the doc http://api.jqueryui.com/resizable/#option-handles

AntonNiklasson
  • 1,719
  • 1
  • 15
  • 28
  • Looks good, I'm just figuring out how I can lock down to width resizing only. – QFDev Jul 25 '13 at 10:50
  • Also I need the handle on the left border rather than floating in the lower right. Does anyone know if this is possible, I'm reading through the API documentation now. – QFDev Jul 25 '13 at 10:55
1

Try this code ..

$('.child').resizable({
    handles: 'w'
});

You can add then a max and min Width

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
Sbml
  • 1,907
  • 2
  • 16
  • 26
0

You can also attach an event handler as shown below, which is useful if you want to do something at the start or end of the resize. 

$("#resizeableElementId").resizable({handles: 'n,w,s,e', minWidth: 200, maxWidth: 600}); 

$("#resizeableElementId").on( "resizestop", function( event, ui ) {

    console.log('resize ended');
    console.dir(event);

});

Remember that you need to include jQuery UI too; download it and add something like this:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />
paulo62
  • 2,637
  • 1
  • 21
  • 15