Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Autoresize textarea help

    Heya,

    I'm using this script for auto-resizing textareas.
    But - this script auto-resizes every textarea on the page, and I only want the textarea id's with txt1, txt2, txt3, txt4 to be auto-resized.
    So if I have a textarea with id "noresize" it shouldnt be resized.

    Any ideas how to do this?

    Thanks!!

    PHP Code:
    <style type='text/css'>
    textarea border:0 noneoverflow:hiddenoutline:nonebackground-color:#eee }
    </style>
    <
    textarea style='height:100px;font-family:arial' id="txt1"></textarea>
    <
    textarea style='height:125px;font-family:arial' id="txt2"></textarea>
    <
    textarea style='height:150px;font-family:arial' id="txt3"></textarea>
    <
    textarea style='height:175px;font-family:arial' id="txt4"></textarea>
    <
    textarea style='height:175px;font-family:arial' id="noresize">I dont want this textarea with auto-resize.</textarea>
    <
    script type='text/javascript'>
    function 
    attachAutoResizeEvents()
    {   for(
    i=1;i<=4;i++)
        {   var 
    txtX=document.getElementById('txt'+i)
            var 
    minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
            
    txtX.onchange=new Function("resize(this,"+minH+")")
            
    txtX.onkeyup=new Function("resize(this,"+minH+")")
            
    txtX.onchange(txtX,minH)
        }
    }
    function 
    resize(txtX,minH)
    {   
    txtX.style.height 'auto' 
        
    txtX.style.height txtX.scrollHeight+'px'
        
    if(txtX.scrollHeight<=minH)
            
    txtX.style.height minH+'px'
    }
    window.onload=attachAutoResizeEvents
    </script>
     

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    I don't see how that one <textarea> *ever* got resized.

    It did, however, move down if the height of some of the others got high enough.

    But in any case, your code doesn't work quite right, at least in Chrome browser. When the style.height of the <textarea> is 100, for example, the scrollHeight is 104. (To account for margins or borders or I dunno what...maybe just font size.)

    So you may have to hack an adjustment in there that is browser dependent. This code (simplified from yours) seems to work in Chrome and also MSIE 10, at least:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'> 
    textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee } 
    </style> 
    </head>
    <body>
    <textarea style='height:100px;font-family:arial' id="txt1"></textarea> 
    <textarea style='height:125px;font-family:arial' id="txt2"></textarea> 
    <textarea style='height:150px;font-family:arial' id="txt3"></textarea> 
    <textarea style='height:175px;font-family:arial' id="txt4"></textarea> 
    <textarea style='height:175px;font-family:arial' id="noresize">I dont want this textarea with auto-resize.</textarea> 
    
    <script type='text/javascript'> 
    for(i=1;i<=4;i++) 
    {
        var txtX=document.getElementById('txt'+i);
        txtX.setAttribute( "originalHeight", txtX.style.height.replace("px","") );
        txtX.onchange = taResize;
        txtX.onkeyup  = taResize;
    }
    function taResize( )
    {
        var h = Number( this.getAttribute("originalHeight") );
        var sh = this.scrollHeight - 5;
        if ( sh > h ) { h = sh; }
        this.style.height = h + "px";
    } 
    </script>  
    </body>
    </html>
    Last edited by Old Pedant; 08-19-2013 at 09:50 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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