Я нашел (не написал) фрагмент кода для изменяемого размера 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>
РЕДАКТИРОВАТЬ: кажется, chrome поддерживает CSS3 свойство RESIZE.Это потрясающе и совершенно лучше, чем подход JS, который я использовал.Тем не менее, я хотел бы, чтобы приведенный выше код работал на chrome, как на FF / IE, чтобы мне не пришлось проверять тип браузера.