Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Написал скрипт ресайза любого элемента на странице. Хотя скрипт писал только для текстовых полей - подойдет он и к блокам с таблицами. Работает во всех браузерах. Позволяет изменять ширину, высоту, ширину и высоту одновременно. В аттаче поста пример работы скрипта, а вот код примера и скрипта:
Code
1 <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> 2 <script> 3 // Создано на http: // studioad.ru 4 var i,mXp,mYp,oWp,oHp,sW,sH,xr,yr,zr,info,area;5 function resizeIt( obj) { 6 area= obj; 7 info = area.rel ? area.rel.split ( ':' ) : [ ] ; 8 sW = info[ 0 ] ? info[ 0 ] : arinf( area) .w; 9 sH = info[ 1 ] ? info[ 1 ] : arinf( area) .h; 10 area.rel= sW+ ':' + sH; 11 } 12 i= false ; 13 IE= /* @cc_on! @* / false ; 14 xr= yr= zr= false ; 15 addHandler( document ,'mousemove' ,function( event ) { 16 if ( IE) { event = window .event ;if ( xr| | yr| | zr) { event .returnValue= false } } 17 oW = arinf( area) .w; 18 oH = arinf( area) .h; 19 oT = getElm( area) .t; 20 oL = getElm( area) .l; 21 mX = getMouse( event ) .x; 22 mY = getMouse( event ) .y; 23 if ( i) { 24 if ( oWp+ mX- mXp> = sW& & ( xr| | zr) ) { area.style.width= oWp+ mX- mXp+ 'px' } else if ( xr| | zr) { area.style.width= sW+ 'px' } 25 if ( oHp+ mY- mYp> = sH& & ( yr| | zr) ) { area.style.height= oHp+ mY- mYp+ 'px' } else if ( yr| | zr) { area.style.height= sH+ 'px' } 26 } 27 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( ) } 28 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( ) } 29 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( ) } 30 else { if ( ! i) { cur( '' ) ;xr= yr= zr= false ;} } 31 } ) ; 32 addHandler( document ,'mouseup' ,function( ) { if ( i) { cur( '' ) ;xr= yr= zr= false } ;i= false } ) ; 33 function setMD( ) { 34 addHandler( document ,'mousedown' ,function( event ) { if ( xr| | yr| | zr) { 35 if ( IE) { event = window .event } else { event .preventDefault( ) } 36 i = tr ue; 37 mXp = getMouse( event ) .x; 38 mYp = getMouse( event ) .y; 39 oWp = arinf( area) .w; 40 oHp = arinf( area) .h; 41 } } ) ; 42 } 43 function arinf( e) { 44 var w,h; 45 w= parseInt ( e.style.width) ; 46 h= parseInt ( e.style.height) ; 47 return { w: w,h: h} ; 48 } 49 function cur( n) { 50 if ( ! window .opera) { area.style.cursor= n;document .body .style.cursor= n} 51 } 52 function getMouse( e) { 53 x = e.clientX+ document .body .scrollLeft+ document .documentElement.scrollLeft; 54 y = e.clientY+ document .body .scrollTop+ document .documentElement.scrollTop; 55 return { x: x,y: y} ; 56 } 57 function getElm( e) { 58 var el= e.offsetLeft; 59 var el2= e.offsetTop; 60 while ( e.offsetParent! = null ) { e= e.offsetParent;el+ = e.offsetLeft;el2+ = e.offsetTop;if ( e.tagName== 'HTML' ) { break } } 61 return { l: el,t: el2} ; 62 } 63 function addHandler( object, event , handler) { 64 if ( object.addEventListener) { object.addEventListener( event ,handler,false ) ;} else 65 if ( object.attachEvent) { object.attachEvent( 'on' + event ,handler) ;} else 66 { object[ 'on' + event ] = handler;} 67 } 68 </script>
Скрипт позволяет работать с несколькими полями. Для того, чтобы поле можно было растягивать, по нему (в данном случае) необходимо щелкнуть. Затем просто подведите мышку к краю поля и растягивайте его как обычное окно. Размеры запоминает в теге rel. Обратите внимание на параметр resize:none , он используется специально для запрещения дефолтного ресайза в вебкит браузерах. Пример работы скрипта:
Бесплатные обои.