Предлагаю жесты для изменения размеров TEXTAREA

The page you are reading is written by a narrow minded Firefox fanboy who does not like the fact that the browser you are using supports more CSS than Firefox. As a result, this page would normally contain a lie about Opera, but this has been removed by Opera's User JavaScript. Enjoy :)

Народ, скажите, пожалуйста, почему не работает готовый скрипт Resize Textarea 0.1, который я наглым образом вытянул из расширения resizeabletextarea v0.1a для FireFox? Вроде тотже javascript.... браузер должен влиять на работоспособностть скрипта?
вот код:
Code:

/*

  Resize Textarea 0.1
  Original coding by Raik Juergens
  Contact: borstel33@web.de

*/

var resizeTa =
{
  loaded: null,
  TAlength: 0,

  init: function (){
    if (resizeTa.loaded)
      return;
    else{
        resizeTa.loaded = true;
        var appcontent = document.getElementById("appcontent");
        if(appcontent)
        appcontent.addEventListener("load", resizeTa.pageload, true);
        }
  },

pageload: function (aEvent){
    resizeTa.doc = aEvent.originalTarget;
    resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA');
    resizeTa.TAlength = resizeTa.TA.length;
    if(resizeTa.TAlength == 0){
        return;
    }else{
    resizeTa.rootElem = resizeTa.doc.getElementsByTagName('HTML')[0];
    var i = resizeTa.TAlength;
        while(i--){
            resizeTa.newdiv('5' ,'1' ,'gripH_',i,'w' );
            resizeTa.newdiv('1' ,'5' ,'gripV_',i,'n' );
            resizeTa.newdiv('10','10','gripX_',i,'se');
            }
        resizeTa.newdiv('0','0','showCursor','','w');
        CursorDiv = resizeTa.doc.getElementById('showCursor');
        CursorDiv.removeEventListener('mousedown', resizeTa.activate, true);
        CursorDiv.style.left = '0px';
        CursorDiv.style.top  = '0px';
        resizeTa.posdivs();
        window.addEventListener("resize",resizeTa.posdivs,true);
        }
    },

newdiv: function (w,h,id,nr,cu){
    var grip = resizeTa.doc.createElement("div");
    grip.setAttribute("ID", id+nr);
    grip.setAttribute("STYLE", "position:absolute;width:"+w+"px;height:"+h+"px;cursor:"+cu+"-resize");
    grip.addEventListener('mousedown', resizeTa.activate, true);
    resizeTa.rootElem.appendChild(grip);
    },

getposition: function (i){
	var curElem = resizeTa.TA[i];
	var curX = curElem.offsetLeft;
	while (curElem.offsetParent) {
        curX += curElem.offsetParent.offsetLeft;
        curElem = curElem.offsetParent;
        }
	curElem = resizeTa.TA[i];
	var curY = curElem.offsetTop;
	while (curElem.offsetParent) {
        curY += curElem.offsetParent.offsetTop;
        curElem = curElem.offsetParent;
        }
    return [curX,curY]
    },

posdivs: function (){
    var k = resizeTa.TAlength;
    while(k--){
        curPos = resizeTa.getposition(k);
        resizeTa.doc.getElementById('gripH_'+k).style.left   = curPos[0]+resizeTa.TA[k].offsetWidth -3 + "px";
        resizeTa.doc.getElementById('gripH_'+k).style.top    = curPos[1]                               + "px";
        resizeTa.doc.getElementById('gripH_'+k).style.height =           resizeTa.TA[k].offsetHeight-8 + "px";
        resizeTa.doc.getElementById('gripV_'+k).style.left   = curPos[0]                               + "px";
        resizeTa.doc.getElementById('gripV_'+k).style.top    = curPos[1]+resizeTa.TA[k].offsetHeight-3 + "px";
        resizeTa.doc.getElementById('gripV_'+k).style.width  =           resizeTa.TA[k].offsetWidth -8 + "px";
        resizeTa.doc.getElementById('gripX_'+k).style.left   = curPos[0]+resizeTa.TA[k].offsetWidth -8 + "px";
        resizeTa.doc.getElementById('gripX_'+k).style.top    = curPos[1]+resizeTa.TA[k].offsetHeight-8 + "px";
        }
    },

activate: function (e){
	resizeTa.doc = e.target.ownerDocument;
	resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA');
	CursorDiv = resizeTa.doc.getElementById('showCursor');
	resizeTa.TAlength = resizeTa.TA.length;
	var curTargetId = e.target.getAttribute('ID').split("_");
    curTarget = curTargetId[0];
    curTA_Nr = parseInt(curTargetId[1]);
    resizeTa.doc.addEventListener('mouseup', resizeTa.deactivate, true);
    switch(curTarget){
        case "gripH": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_h, true); break;
        case "gripV": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_v, true); break;
        case "gripX": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_x, true); break;
        }
    CursorDiv.style.width = resizeTa.rootElem.offsetWidth + "px";
	CursorDiv.style.height = resizeTa.rootElem.offsetHeight + "px";
	CursorDiv.style.cursor = e.target.style.cursor;
	},

deactivate: function (){
    resizeTa.doc.removeEventListener('mouseup', resizeTa.deactivate, true);
    switch(curTarget){
        case "gripH": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_h, true); break;
        case "gripV": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_v, true); break;
        case "gripX": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_x, true); break;
        }
    CursorDiv.style.width = '0px';
    CursorDiv.style.height = '0px';
    resizeTa.posdivs();
    },

resizeta_h: function (e){
	curPos = resizeTa.getposition(curTA_Nr);
    resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + "px";
    },

resizeta_v: function (e){
	curPos = resizeTa.getposition(curTA_Nr);
    resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + "px";
    },

resizeta_x: function (e){
	curPos = resizeTa.getposition(curTA_Nr);
    resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + 2 + "px";
    resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + 2 + "px";
    }
}

window.addEventListener("load",resizeTa.init,false);

Сори за слишком большое сообщение.

// ==UserScript==
// @name ExpandArea
// @version 1.1
// @namespace http://stilleye.com/greasemonkey
// @author David Schontzler
// @description Adds button to make textareas expandable
// @include *
// @exclude gmail.google.com/*
// @exclude *.jot.com/*
// ==/UserScript==

(function() {
function expandArea(elms) {
var elms2 = [];
for(var i = 0; i < elms.length; i++) {
elms2.push(elms[i]);
}
for(var i = 0; i < elms2.length; i++) {
applyArea(elms2[i]);
}

function applyArea(elm) {
var w = elm.offsetWidth,
h = elm.offsetHeight;
var pos = getAbsolutePosition(elm);

var overlay = document.createElement("div");
overlay.style.width = w + "px";
overlay.style.height = h + "px";
overlay.style.position = "absolute";
overlay.style.left = pos.x + "px";
overlay.style.top = pos.y + "px";
overlay.style.padding = "4px";
overlay.style.zIndex = "999";
overlay.className = "ExpandArea";

var size = document.createElement("div");
size.style.width = size.style.height = "8px";
size.style.background = "#33f";
size.style.position = "absolute";
size.style.right = "-8px";
size.style.bottom = "-8px";
size.style.cursor = "nw-resize";
size.style.MozBorderRadius = "4px";
size.setAttribute("title", "Drag blue box to size the text area");
var offX, offY;
size.addEventListener("mousedown", function(e) {
offX = e.offsetX + 8; offY = e.offsetY + 8;
document.body.addEventListener("mousemove", doSize, false);
document.body.addEventListener("mouseup", endSize, false);
}, false);
overlay.appendChild(size);

var reset = size.cloneNode(false);
reset.style.background = "#c00";
reset.style.right = "1px";
reset.style.cursor = "pointer";
reset.setAttribute("title", "Click the red box to reset the size of the text area");
reset.addEventListener("click", function(e) {
overlay.style.width = w + "px";
overlay.style.height = h + "px";
}, false);
overlay.appendChild(reset);

var txt = document.createElement("textarea");
txt.value = elm.value;
txt.style.width = "100%";
txt.style.height = "100%";
txt.onkeyup = function(e) {
elm.value = this.value;
}
overlay.appendChild(txt);

document.body.appendChild(overlay);
elm.style.visibility = "hidden";

function doSize(e) {
var x = e.pageX - pos.x - offX;
var y = e.pageY - pos.y - offY;
if( x > 40 ) overlay.style.width = x + "px";
if( y > 40 ) overlay.style.height = y + "px";
}

function endSize(e) {
document.body.removeEventListener("mousemove", doSize, false);
document.body.removeEventListener("mouseup", endSize, false);
}
}

function getAbsolutePosition(elm) {
var x = 0, y = 0;
while( elm && elm != document.body ) {
x += elm.offsetLeft;
y += elm.offsetTop;
elm = elm.offsetParent;
}
return { x: x, y: y };
}
}

function setup() {
if( !document.getElementsByTagName("textarea").length ) return;

var on = document.createTextNode("Expand Textarea");
var off = document.createTextNode(String.fromCharCode(160) + String.fromCharCode(171) + String.fromCharCode(160));

var html = " « ";
var trigger = document.createElement("div");
trigger.appendChild( off );
with(trigger.style) {
position = "fixed";
right = bottom = "0px";
color = "black";
background = "white";
border = "1px solid";
padding = "3px";
font = "10px sans-serif";
cursor = "pointer";
MozOpacity = ".4";
}
document.body.appendChild(trigger);
trigger.onmouseover = function() {
this.replaceChild(on, off);
}
trigger.onmouseout = function() {
this.replaceChild(off, on);
}
trigger.onclick = function() {
expandArea(document.getElementsByTagName("textarea"));
this.parentNode.removeChild(this);
}
}

window.addEventListener("load", setup, false);
})();