How can I make a DOM element's height resizable?

Question

I have a widget in my ui that resides in a fixed location on the right bottom corner of my browser.

I want the user to be able to click on the header portion of the widget and be able to drag it upwards and effectively increase the height of the widget. The widgets bottom, left, and right properties would be unchanged but top should be able to change to allow up to the max height of the widget as defined by it's css max-height.

Are there any examples of something like this out there? I know jQueryUI has the resizable behavior but unfortunately I cannot use jQueryUI on this project. We are however using jQuery.

Any tips or ideas or jsfiddle exaples are greatly appreciated. Just something to get me going in the right direction. I looked a CSS3 resizable and it puts that standard resizing icon in the right bottom corner, like this textarea.

Hmm... how about looking at the JQueryUI source code and seeing how it does things? — hugomg, Oct 21 '11 at 17:39

score 0 · Answer 1 · answered Oct 21 '11 at 17:44

0

Perhaps this plugin can help?

http://dev.iceburg.net/jquery/jqDnR/

answered Oct 21 '11 at 17:44

Damon Bauer

2,718
1
22
35

score 0 · Answer 2 · answered Oct 21 '11 at 18:06

It is possible to do this with just jQuery. Off the top of my head, you could probably do something like this:

<div id="widget">
    <h3 id="widget-header">Header</h3>
    some content
</div>

<script language="javascript" type="text/javascript">
    var clientY = 0;
    var offset = null;
    var changeSize = false;

    $(function () {
        $("#widget-header")
            .mousedown(function (event) {
                clientY = event.pageY;
                offset = $("#widget").offset();
                changeSize = true;
            })
            .mousemove(function (event) {
                if (changeSize) {

                    // get the changes
                    var difY = event.pageY - clientY;
                    offset.top += difY;

                    // animate the changes
                    $("#widget").offset({ top: offset.top, left: offset.left });
                    $("#widget").height($("#widget").height() - difY);

                    // update the new positions
                    clientY = event.pageY;
                }
            })
            .mouseup(function (event) { changeSize = false; })
            .mouseout(function(event) { changeSize = false; });
    });

</script>

How can I make a DOM element's height resizable?

2 Answers2