Question

I wrote this code that when you click on the element the element above it will resize to be bigger or smaller

When I click on it it seems to drag down nicely once and then trying to drag down again causes it to go down off the screen.

function pulldown(element){
var puller = document.getElementById(element);
puller.addEventListener("mousedown", function(e){
    var boxStyle = document.getElementById("resizeBox").getAttribute("style");
    var currentSize = (boxStyle.match(/\d+/));
    var ypos = e.clientY;
    var resize = document.getElementById("resizeBox");
    resize.style.height = currentSize;

    function watchPull(e){
        number2 = currentSize + (e.clientY - ypos);
        resize.style.height = number2+"px";
    }
    document.addEventListener("mousemove", watchPull,false);

    document.addEventListener("mouseup", function(e){
        document.removeEventListener("mousemove", watchPull, false);
        number = currentSize + (e.clientY - ypos);
        resize.style.height = number+"px";
    },false)
},false);
}
pulldown("pullDown");

here is what is happening.

http://jsfiddle.net/jamcoupe/4hKg8/
(click on “no items” and then drag the black line down or up)

Answer 1

Solved it!

After pulling my hairs out here is it!

function pullbox() {
var pull;
pull = document.getElementById("pullDown");
pull.addEventListener("mousedown", function (e) {
    e.preventDefault();
    var currentSize = new Number((document.getElementById("resizeBox").getAttribute("style").match(/\d+/)));
    var yClick = e.clientY;
    function mouseMove(e) {
        if(currentSize < 0){
            currentSize = 0;
        }
        e.stopPropagation();
        var newTotalMove = ((e.clientY - yClick) + currentSize);
        document.getElementById("resizeBox").setAttribute("style", "height:" + newTotalMove + "px");
    }
    function mouseUp() {
        document.removeEventListener("mousemove", mouseMove, false);
        document.removeEventListener("mouseup", moseUp, false);
    }
    document.addEventListener("mousemove", mouseMove, false);
    document.addEventListener("mouseup", mouseUp, false);
}, false);
}
pullbox();

http://jsfiddle.net/jamcoupe/4hKg8/1/