jQuery UI Resizable Widget

JavaScript
1

I want to start by saying my client side programming skills need a lot of help. I’ve been reading lots of JavaScript trying to learn but it’s so different from the OOP style i’m familiar with…

What I did was put an extra maxHeight constraint on the resizable widget (jQuery UI) so it will only use space leftover. I’m subtracting total height of the sibling elements from the parent height to get the height leftover. I then use that
leftover as the maxHeight value. But the way I did feels hacked together. I have a working example for you, If possible I would like to know how wrong my approach is, and how it could be done differently. Its very important to me to learn how to do things right, so I value your suggestions, opinions, and comments.

JavaScript:


var utility = function(){
    //Constructor function, "this" has reference to object that is being created
    this.siblingHeight = function(ele){

        //collection of sibling elements
        var siblings = $(ele).siblings();

        var height = 0;

        siblings.each(function(){

            var element = $("#" + this.id);

            var marginHeight = parseInt(element.css("margin-top")) +
            parseInt(element.css("margin-bottom")
                );

            var borderHeight = parseInt(element.css("border-top-width")) +
            parseInt(element.css("border-bottom-width")
                );

            height = height + ($(this).height() + marginHeight + borderHeight);

        });

        return height;
    }

}

    jQuery.prototype.staticblock = function(){

        var updateMaxHeight = function(id){

            var parentHeight = $("#" + id).parent().height();

            var utilityObj = new utility();
            var siblingHeight = utilityObj.siblingHeight("#" + id);

            var maxHeight = parentHeight - siblingHeight;

            $("#" + id).data().uiResizable.options.maxHeight = maxHeight;

        }

        $(".static").each(function(){
            $( "#" + this.id ).resizable({
                maxHeight: null ,
                containment: "parent",
                start: function(){
                    updateMaxHeight(this.id);
                }
            });
        });

    }

HTML:

<div id=“resizable1” class=“ui-widget-content static”>
test
</div>

You must call $().staticblock(); on the page.