Question

I’ve been fiddling with jquery resize, although I can’t seem to get the desired effect I need.

Basically, I have a menu which I want to resize with a button that floats to the right of the menu, once dragged it will resize the menu, I also want to limit the resize if possible!

Please help? Here’s what I have so far 🙁

http://jsfiddle.net/shannonhochkins/uGtat/

Thanks guys!

Answer 1

Documentation

http://jqueryui.com/demos/draggable/

jQuery

$('#drag').disableSelection().draggable({
    axis: "x",
    containment: "parent",
    drag: function(event, ui) {
        $('#menu').width($(this).offset().left);
    },
    stop: function(event, ui) {
        $('#menu').width($(this).offset().left);
    }
});​

CSS

#parent {
    position: relative;
    width: 300px;
    height: 70px;
    background: #ccc;
}
#drag, #menu {
    position: absolute;
    height: 70px;
    width: 30px;
    background-color: green;
}
#drag {
    width: 15px;
    background-color: red;
    left: 30px;
    cursor: pointer;
}​
​

Fiddle

http://jsfiddle.net/iambriansreed/gkMPA/