Chromeのユーザーが推測した動的DIV高さ

StackOverflow https://stackoverflow.com/questions/4542428

質問

FirefoxとIEで美しく機能するresizable Divのコードを（書かれていない）ことを発見しましたが、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>

編集：ChromeはCSS3プロパティのサイズをサポートしているようです。これは素晴らしく、私が使用したJSアプローチよりも完全に優れています。それでも、上記のコードがFF/IEのようにChromeで機能したことを望みますので、ブラウザタイプを確認する必要はありません。

役に立ちましたか？

解決

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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top