Benutzer eingegebene dynamische div Höhe in Chrom

Ich habe gefunden (nicht geschrieben) ein Stück Code für eine resizable div, die schön in Firefox und IE funktioniert, aber in Chrome ist es sehr schwierig zu erweitern - es ignoriert oft nur wenn du versuchst es zu dehnen. Ich bin nicht einmal sicher, warum das so ist - es ist schwierig zu beheben.Benutzer eingegebene dynamische div Höhe in Chrom

Irgendein Hinweis, warum Chrom sich oft weigert, dieses div zu erweitern, wäre nett. Probieren Sie es selbst aus.

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

Skripte:

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

endlich die 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: scheint Chrom die RESIZE CSS3-Eigenschaft unterstützt. Das ist großartig und total besser als der JS-Ansatz, den ich verwendet habe. Trotzdem wünschte ich mir, dass der obige Code in Chrome genauso funktioniert wie in FF/IE, so dass ich nicht nach dem Browsertyp suchen müsste.

Quelle

2010-12-27 Amalgovinus

Für die Zukunft können Sie den gesamten Abschnitt des Codes markieren Sie formatiert angezeigt werden sollen und klicken Sie auf den '{}' Symbol über dem Textfeld zu formatieren. – 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>

Quelle

2011-02-08 12:59:16 Caio

Frickin beeindruckend. Gut gemacht. Funktioniert nicht im IE, aber in FF und Chrome ist es erstaunlich glatt. – Amalgovinus

Also ..... irgendeine Idee, warum das nichts (keine Fehler obwohl) im IE tut, wenn wir addEventListener mit attachEvent ersetzen und die sprudelnden booleans loswerden? – Amalgovinus

Ich gebe nur eine kleine Hand, wenn Sie JavaScript verstehen wollen, müssen Sie sich bemühen. Code neu geschrieben. – Caio

Benutzer eingegebene dynamische div Höhe in Chrom

Antwort

Verwandte Themen