SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouseover/out expand and contract textarea or table

    I am using this js for expanding a text area to fit the text on mouseover. I would like to set it up to shrink it back on mouseout. I just muddle around with javascript so if an expert can give me a tip how to do this that would be great. I'd like to also apply this to a table's height. Is that possible?

    js script:
    Code:
    function sz(t) {
    a = t.value.split('\n');
    b=1;
    for (x=0;x < a.length; x++) {
     if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
     }
    b+= a.length;
    if (b > t.rows) t.rows = b;
    }
    Page code:
    Code:
    <textarea onkeyup='sz(this)' onmouseover='sz(this)' rows='10' cols='125' wrap='virtual' name='Work_Request'  id='Work_Request'><?php echo $projectrow['Work_Request']; ?></textarea>
    Thanks

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting idea there. I had a similar demo, which I beefed up after seeing your idea...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <meta name='author' content='Mike Foster (Cross-Browser.com)'>
    <style type='text/css'>
    div {
      margin: 2em;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      taInit();
    }
    // initialize all textareas
    function taInit()
    {
      var i, ta = document.getElementsByTagName('textarea');
      for (i = 0; i < ta.length; ++i)
      {
        ta[i]._ta_default_rows_ = ta[i].rows;
        ta[i]._ta_default_cols_ = ta[i].cols;
        ta[i].onkeyup = taExpand;
        ta[i].onmouseover = taExpand;
        ta[i].onmouseout = taRestore;
        ta[i].onfocus = taOnFocus;
        ta[i].onblur = taOnBlur;
      }
    }
    function taOnFocus(e)
    {
      this._ta_is_focused_ = true;
      this.onmouseover();
    }
    function taOnBlur()
    {
      this._ta_is_focused_ = false;
      this.onmouseout();
    }
    // set to default size if not focused
    function taRestore()
    {
      if (!this._ta_is_focused_)
      {
        this.rows = this._ta_default_rows_;
        this.cols = this._ta_default_cols_;
      }
    }
    // adjust rows and cols to fit text
    function taExpand()
    {
      var a, i, c = 0;
      a = this.value.split('\n');
      for (i = 0; i < a.length; i++) {
        if (a[i].length > c) c = a[i].length;
      }
      this.cols = c;
      this.rows = a.length;
    }
    </script>
    </head>
    <body>
    
    <div>
    <textarea rows='1' cols='50' wrap='virtual'>
    Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.
    </textarea>
    </div>
    
    <div>
    <textarea rows='1' cols='50' wrap='virtual'>
    Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </textarea>
    </div>
    
    </body>
    </html>
    Demo Online

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks and a few questions

    Hey that looks pretty good.

    However, I just want to manipulate the number of rows. I would like the textarea always to be at least the default size and only increase in rows, not columns when the text overflows. I am using the virtual wrap. And when the text is less than the default size I don't want the text area to shrink. Any ideas how to modify this script to do that?


    Thanks again
    Last edited by bankfishin; Oct 10, 2006 at 13:53.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is what works for me

    Ok this is a lot more simple than yours but it does what I need it to.

    Code:
    function size_down(T) {
    T.rows = 5;
    }
    
    function size_up(T) {
    a = T.value.split('\n');
    b=1;
    for (x=0;x < a.length; x++) {
     if (a[x].length >=T.cols) b+= Math.floor(a[x].length/T.cols);
     }
    b+= a.length;
    if (b > T.rows) T.rows = b;
    }

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work!

    For reference here's my updated demo.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Great Script!

    MikeFoster,

    Thanks for posting that updated script. The one I was using interfered with another script I was trying to use. I don't know how js works but I could use one or the other but when I tried to put both on my page it errored one out. So I grabbed yours and it works like a charm. Thanks so much.

    Is there a way to apply this to tables or does it only work with textareas? I want to fix the height of a table that displays information from a database. And then on moueover expand the table to display all the text from the database.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, bankfishin

    A similar technique could be applied to tables, but the current code will not work with tables.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I noticed

    MikeFoster,

    Yes I tried using it with a table that I put in a div and then gave the div the same ID and tried modifying your script using document.getElementsById('id');

    But it didn't work.

  9. #9
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bankfishin View Post
    Ok this is a lot more simple than yours but it does what I need it to.

    Code:
    function size_down(T) {
    T.rows = 5;
    }
    
    function size_up(T) {
    a = T.value.split('\n');
    b=1;
    for (x=0;x < a.length; x++) {
     if (a[x].length >=T.cols) b+= Math.floor(a[x].length/T.cols);
     }
    b+= a.length;
    if (b > T.rows) T.rows = b;
    }
    Can I see how the demo works?

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi HM2K, Welcome to SPF!

    Not sure if you mean my demo or bankfishin's, but here's a link to mine.

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have an expanding text area on my site located at:
    http://rentev.com/leoj/Momotaro/dragdrop/index2
    if you want an example of javascript manipulating cols...

  12. #12
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all very much that i found this very much useful in my case. Thank god, at least i read this post before posting my new one.
    Then how about resizing the text area clicking on the border of the text area or DIV?
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


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
  •