Search code examples
javascriptgoogle-chromeonmousedownexpandable

User-inputted dynamic div height in chrome

I have found (not written) a piece of code for a resizable div that works beautifully in firefox and IE, but in Chrome it's very difficult to expand--it often just ignores you if you try to stretch it. I'm not even sure why this is--it's difficult to troubleshoot.

Any hint as to why chrome is often refusing to expand this div would be nice. Try for yourself.

#mydiv{
    position:relative;
    top:0px;
    left:0px;
    width:250px;
    border: 1px solid #808080;
    overflow: auto;
}

#statusbar{
    cursor: s-resize;
    position:relative;
    display:block;
    background-color: #c0c0c0;
    font-size: 0px;
    margin:0;
    height:5px;
    border: 1px solid #808080;
    padding:0;
    width: 250px;
}

scripts:

var curHeight=0;
var curMousePos=0;
var mouseStatus='up';
var curEvent;

//this function gets the original div height
function setPos(e){
    curEvent=(typeof event=='undefined'?e:event);
    mouseStatus='down';
    //gets position of click
    curMousePos=curEvent.clientY;
    curHeight=parseInt(document.getElementById('mydiv').style.height.split('p')[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
    if(mouseStatus=='down'){
        curEvent=(typeof event=='undefined'?e:event);
        //how many px to update the div? difference of previous and current positions
        var pxMove=parseInt(curEvent.clientY-curMousePos);
        var newHeight=parseInt(curHeight+pxMove);
        //conditional to set minimum height to 5
        newHeight=(newHeight<5?5:newHeight);
        //set the new height of the div

        document.getElementById('mydiv').style.height=newHeight+'px';
    }
}

finally the HTML:

    <div>
    <div id="mydiv" style="height: 250px; min-height:150px; ">
        <div></div>
    </div>
    <div onmousedown="setPos(event)" onmouseup="mouseStatus='up'" id="statusbar"></div>
</div>

EDIT: seems chrome supports the CSS3 property RESIZE. This is awesome and totally better than the JS approach I used. Still, I wish the above code worked on chrome as it does on FF/IE so I wouldn't have to check for the browser type.

Solution

  • enter image description here

    <!doctype html>

<html>
    <head>
        <script>
            window.onload = function () {
                var div = document.getElementById ("statusBar");

                var press = false;

                div.onmousedown = function () {
                    press = true;

                    return false;
                }

                this.onmousemove = function (event) {
                    event = event ? event : window.event;

                    if (press === true) {
                        div.style.height = event.clientY + "px";
                    }
                }

                this.onmouseup = function () {
                    press = false;
                }
            }
        </script>

        <style>
            #statusBar {
                background-color: #c0c0c0;
                border: 1px solid #808080;
                cursor: s-resize;
                margin: 0;
                min-height: 5px;
                padding: 0;
                width: 250px;
            }
        </style>

        <title></title>
    </head>

    <body>
        <div id = "statusBar"></div>
    </body>
</html>