ユーザー入力のクロムの動的divの高さ

firefoxとIEでうまく動作するサイズ変更可能なdivのコードを見つけましたが（書かれていません）、Chromeでは非常に展開が難しいです。あなたはそれを伸ばそうとします。私はこれがなぜなのかも分からない。トラブルシューティングが難しい。ユーザー入力のクロムの動的divの高さ

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>

EDITは：クロームはCSS3プロパティRESIZEをサポートしているようです。これは私が使用したJSのアプローチよりも素晴らしいものです。それでも、上記のコードはFF/IEと同じようにchromeで動作していたので、ブラウザのタイプを確認する必要はありません。

出典

2010-12-27 Amalgovinus

今後の参考のために、あなたは、フォーマットを表示し、それをフォーマットするテキストエリアの上に、 '{}'アイコンをクリックするコードのセクション全体を強調表示することができます。 – Robert

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>

出典

2011-02-08 12:59:16 Caio

Frickin impressive。良くやった。 IEでは動作しませんが、FFやChromeでは驚くほど滑らかです。 – Amalgovinus

だから、IEでaddEventListenerをattachEventに置き換えてバブリングブーリアンを取り除くと、これは何もしません（エラーはありません）。 – Amalgovinus

私はちょっとした手を差し伸べています。あなたが努力する必要があるJavaScriptを理解したいのですが。コードが書き換えられます。 – Caio

ユーザー入力のクロムの動的divの高さ

答えて

関連する問題