Results 1 to 7 of 7

Thread: resize textarea in firefox

  1. #1
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default resize textarea in firefox

    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)">

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can we please see a link to your website so we can help you?
    Jeremy | jfein.net

  3. #3
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)">

  4. #4
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    thanks!

  5. #5
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can you please post your final code?

  6. #6
    Join Date
    Dec 2008
    Posts
    35
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

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

  7. #7
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you ... there are some useful scripts there

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •