set height div javascript

Question

I'm adjusting the height of the box with no problems, now I would like to adjust the height of the box grabbing the top handle and adjust height but upwards. What would be a good way of doing this? thanks

(current downwards code)

var mY = event.clientY; 
var originalHeight = parseInt(document.getElementById('somediv').style.height);

if(click == 1){ // down
            var sY = event.clientY; 
            var finalHeight = originalHeight +sY-mY;
            document.getElementById('somediv').style.height=finalHeight + 'px';
}else{ // up
    resize upwards instead of downwards....
}

Answer 1

An element's position is defined by its top-left corner - you'll have to move it up at the same time as you extend it from the bottom.

Answer 2

Resizing a DIV "up" is not as easy as resizing it "down". The reason is that when you specify a HEIGHT, the DIV will expand "down" as its normal flow. The top left corner of the DIV will remain static.

Allowing the DIV to be resized "UP" will give you a lot of issues. In order to do this, you will need to set the HEIGHT, then the POSITION of the DIV to currentHeight - previousHeight. You will notice it will jitter a lot when doing this.

Also, anything above your DIV will need to be displayed accordingly.

Answer 3

You should look into jQuery and the jQuery Dimensions plugin.