Введенная пользователем динамическая высота div в chrome

Я нашел (не написал) кусок кода для изменяемого размера div, который прекрасно работает в Firefox и IE, но в Chrome его очень сложно развернуть - он часто просто игнорирует вас, если вы пытаетесь его растянуть. Я даже не уверен, почему это так - это трудно устранить.

Любой намек на то, почему Chrome часто отказывается расширять этот div, был бы хорош. Попробуйте сами.

#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;
}

скрипты:

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';
    }
}

наконец 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>

РЕДАКТИРОВАТЬ: кажется, хром поддерживает CSS3 свойство RESIZE. Это потрясающе и совершенно лучше, чем подход JS, который я использовал. Тем не менее, я хотел бы, чтобы вышеуказанный код работал на Chrome, как на FF/IE, чтобы мне не пришлось проверять тип браузера.

Источник

1 ответ

Решение

<!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>
Источник
Другие вопросы по тегам