resize textarea in firefox

[sublime99]

This code allows the user to click on the image below a text area and drag to resize the textarea.
In IE all is good.

In firefox this code works as I would expect when I assign draglines.gif to a broken image (missing).
However when I assign a draglines.gif to a real image i observe quirky behavior in firefox.
for example:
- I must click and then release the mouse before beginning a resize
now with my mouse up i must click to cancel the resize.
- I must click again outside the image before beginning a new resize.

It appears to be related to focus.
any ideas.



<script>
var glob;
var posy;
function resize(id, event) {
try {

ida=id;
glob = $S(id);
$(id).focus(); // resolve focus issue in firefox, allowing a smooth scroll
if ( !event ) var event = window.event
posy = event.clientY + document.body.scrollTop;
document.onmousemove = _resize;
document.onmouseup = _cancel;
}
catch (err){}
}


function _cancel() {
document.onmouseup = null;
document.onmousemove = null;
}

function _resize(event) {
try {
if ( !event ) var event = window.event
event.cancelBubble = true;
event.returnValue = false;
if (event.stopPropagation) event.stopPropagation();
if (event.preventDefault) event.preventDefault();
var move = event.clientY + document.body.scrollTop - posy;
posy = event.clientY + document.body.scrollTop;
var height = glob.height.replace("px", "")
if (((+height) + move) > 20) glob.height = (+height) + move;

}
catch (err){}
}
</script>

<textarea name="comments" id="textarea" wrap="virtual" style="height: 34px; width: 100%; margin-top : 5px; margin-bottom : 0px" maxlength=500></textarea><br>
<img src="draglines.gif" border="1" height="100" width="100" onmousedown="javascript:resize('textarea',event)">

[Nile]

Can we please see a link to your website so we can help you?

[sublime99]

Ok I will try to post something ijn a public site.

oops sb:
glob = document.getElementById(id).style;


<script>
var glob;
var posy;
function resize(id, event) {
try {

ida=id;
glob = document.getElementById(id).style;

if ( !event ) var event = window.event
posy = event.clientY + document.body.scrollTop;
document.onmousemove = _resize;
document.onmouseup = _cancel;
}
catch (err){}
}


function _cancel() {
document.onmouseup = null;
document.onmousemove = null;
}

function _resize(event) {
try {
if ( !event ) var event = window.event
event.cancelBubble = true;
event.returnValue = false;
if (event.stopPropagation) event.stopPropagation();
if (event.preventDefault) event.preventDefault();
var move = event.clientY + document.body.scrollTop - posy;
posy = event.clientY + document.body.scrollTop;
var height = glob.height.replace("px", "")
if (((+height) + move) > 20) glob.height = (+height) + move;

}
catch (err){}
}
</script>

<textarea name="comments" id="textarea" wrap="virtual" style="height: 34px; width: 100%; margin-top : 5px; margin-bottom : 0px" maxlength=500></textarea><br>
<img src="draglines.gif" border="1" height="100" width="100" onmousedown="javascript:resize('textarea',event)">

[sublime99]

i found a solution. i added
document.onmousedown = _resize;
for firefox

thanks!

[iqdmin]

Can you please post your final code?

[saynogo9999]

Look at this. It might help you http://demos111.mootools.net/Resizable

[iqdmin]

Thank you ... there are some useful scripts there