Написал скрипт ресайза любого элемента на странице. Хотя скрипт писал только для текстовых полей - подойдет он и к блокам с таблицами. Работает во всех браузерах. Позволяет изменять ширину, высоту, ширину и высоту одновременно. В аттаче поста пример работы скрипта, а вот код примера и скрипта:
Code
<textarea onfocus="resizeIt(this);" style='margin:5px;width:200px;height:100px;background:#eee;font:12px Tahoma;color:#aaa;border:1px solid #ccc;resize:none;outline:0;'>Resize me!</textarea>
<script>
// Создано на http://studioad.ru
var i,mXp,mYp,oWp,oHp,sW,sH,xr,yr,zr,info,area;
function resizeIt(obj){
area=obj;
info = area.rel ? area.rel.split(':') : [];
sW = info[0] ? info[0] : arinf(area).w;
sH = info[1] ? info[1] : arinf(area).h;
area.rel=sW+':'+sH;
}
i=false;
IE=/*@cc_on!@*/false;
xr=yr=zr=false;
addHandler(document,'mousemove',function(event){
if(IE){event=window.event;if(xr||yr||zr){event.returnValue=false}}
oW = arinf(area).w;
oH = arinf(area).h;
oT = getElm(area).t;
oL = getElm(area).l;
mX = getMouse(event).x;
mY = getMouse(event).y;
if(i){
if(oWp+mX-mXp>=sW&&(xr||zr)){area.style.width=oWp+mX-mXp+'px'}else if(xr||zr){area.style.width=sW+'px'}
if(oHp+mY-mYp>=sH&&(yr||zr)){area.style.height=oHp+mY-mYp+'px'}else if(yr||zr){area.style.height=sH+'px'}
}
if(mX<=oW+oL+10 && mX>=oW+oL && mY<=oH+oT+10 && mY>=oH+oT){if(!i){cur('nw-resize');xr=yr=false;zr=true}setMD()}
else if(mX>oL && mX<oW+oL && mY<=oH+oT+10 && mY>oH+oT){if(!i){cur('n-resize');zr=xr=false;yr=true}setMD()}
else if(mX<=oW+oL+10 && mX>oW+oL && mY>oT && mY<oH+oT){if(!i){cur('w-resize');zr=yr=false;xr=true}setMD()}
else{if(!i){cur('');xr=yr=zr=false;}}
});
addHandler(document,'mouseup',function(){if(i){cur('');xr=yr=zr=false};i=false});
function setMD(){
addHandler(document,'mousedown',function(event){if(xr||yr||zr){
if(IE){event=window.event}else{event.preventDefault()}
i =tr ue;
mXp = getMouse(event).x;
mYp = getMouse(event).y;
oWp = arinf(area).w;
oHp = arinf(area).h;
}});
}
function arinf(e){
var w,h;
w=parseInt(e.style.width);
h=parseInt(e.style.height);
return {w:w,h:h};
}
function cur(n){
if(!window.opera){area.style.cursor=n;document.body.style.cursor=n}
}
function getMouse(e){
x = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y = e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
return {x:x,y:y};
}
function getElm(e){
var el=e.offsetLeft;
var el2=e.offsetTop;
while(e.offsetParent!=null){e=e.offsetParent;el+=e.offsetLeft;el2+=e.offsetTop;if(e.tagName=='HTML'){break}}
return {l:el,t:el2};
}
function addHandler(object, event, handler){
if(object.addEventListener){object.addEventListener(event,handler,false);}else
if(object.attachEvent){object.attachEvent('on'+event,handler);}else
{object['on'+event]=handler;}
}
</script>
Скрипт позволяет работать с несколькими полями. Для того, чтобы поле можно было растягивать, по нему (в данном случае) необходимо щелкнуть. Затем просто подведите мышку к краю поля и растягивайте его как обычное окно. Размеры запоминает в теге rel. Обратите внимание на параметр resize:none , он используется специально для запрещения дефолтного ресайза в вебкит браузерах. Пример работы скрипта: