SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding And UnExpanding Textarea by Height - help plz

    Hey all, okay i have a problem, i want to create buttons with + and - on them, and when the + is clicked my textarea will expand in height by 20px, and when the - button is clicked it will go back to the original value.

    lets say the original value is 80px, here is what i am working with below so you can get an idea what codes i will need done:

    Code:
    <textarea name='message' rows="6" cols="35" style="width:80%; height:80px; overflow:auto" wrap='virtual' tabindex='1' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>
    
    
    (it says rows=6 i thought this was the height? but anyway, it is using the style=80px whne i apply it to a webpage, so whichever is easier to code, i dont mind, so long as whatever the height is, it will be like 80px and 100px when expanded.)
    
    
    and here are my buttons:
    <input type="button" name='ec_plus' id='add_plus' value="+" onclick="add(100,'message');" class="liteoption" style='width: 25px;'/>
    <input type="button" name='ec_minus' id='add_minus' value="-" onclick="add(-100,'message');" class="liteoption" style='width: 25px;'/>
    i have just added id's and onClick just so you get the point, as the idea i got this from used those values.

    If anyone can help me in writing a javascript code for this little expand/contract textarea that would be greatly appreciated.
    it can use js file or ajax, whatever u think is easy and best.

    it would be better not to put the javascript in the header though, only if linking to a js file.

    HELP WOULD BE SO MUCH APPRECIATED, i have been searching for a solution for 11 hours - no joke, and playing around myself with no result.

    Thanks in advance to all the gurus willing to giv a hand!
    The More I Learn, The More i Have To Unlearn!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Get rid of the rows attribute. Add an ID. Get rid of the style attribute and use CSS.

    Code:
    #message {
      width:80&#37;;
      height:80px;
    }
    Code Javascript:
    window.onload = function() {
      var mess = document.getElementById('message');
      document.getElementById('add_plus').onclick = function() {
        if (!mess.style.height) mess.style.height = 80px;
        else mess.style.height = (parseInt(mess.style.height) + 20) + 'px';
      }
      document.getElementById('add_minus').onclick = function() {
        if (!mess.style.height || parseInt(mess.style.height) == 80) mess.style.height = 80px;
        else mess.style.height = (parseInt(mess.style.height) - 20) + 'px';
      }
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, so do i what do i add in the id=message?

    and why add CSS?, does it make it faster or something?

    thanks os much for your help

    [my_edit] : also can i call it something other than function? like txtarea()?

    and how what do i do to modify this:

    Code:
    <input type="button" name='ec_plus' id='add_plus' value="+" onclick="add(100,'message');" class="liteoption" style='width: 25px;'/>
    <input type="button" name='ec_minus' id='add_minus' value="-" onclick="add(-100,'message');" class="liteoption" style='width: 25px;'/>
    and this:

    Code:
    <textarea name='message' rows="6" cols="35" style="width:80&#37;; height:80px; overflow:auto" wrap='virtual' tabindex='1' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>
    to make this work.

    Also, this javascript does not need to go into the header does it? if so how do i modify it so it can be inserted into the body.


    thanks i am a n000b at javascript.
    [/end_of_edit]
    The More I Learn, The More i Have To Unlearn!

  4. #4
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay this is what i have added to the body (the body has heaps of other javascript functions also, that is why i was worried about calling it function(), as some say function bbcode() , function viola(), function checkform() etc)

    Code:
    </script>
    <script language="JavaScript" type="text/javascript">
    window.onload = fucntion() {
      var mess = document.getElementById('message');
      document.getElementById('add_plus').onclick = function() {
        if (!mess.style.height) mess.style.height = 80px;
        else mess.style.height = (parseInt(mess.style.height) + 20) + 'px';
      }
      document.getElementById('add_minus').onclick = function() {
        if (!mess.style.height || parseInt(mess.style.height) == 80) mess.style.height = 80px;
        else mess.style.height = (parseInt(mess.style.height) - 20) + 'px';
      }
    }
    </script>
    (above this is miles of javascript to control things in this form)

    and below is how i have modified the links of code textarea and the 2 buttons:

    Code:
    <textarea name='message' id='message' cols="35" style="width:80&#37;; height:80px" wrap='virtual' tabindex='1' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea> <br> 
    
    (REMOVED ROWS and added ID as you said)
    
    <input type="button" name='add_plus' id='add_plus' value="+" onclick="('add_plus');" class="liteoption" style='width: 25px;'/>
    <input type="button" name='add_minus' id='add_minus' value="-" onclick="(add_minus');" class="liteoption" style='width: 25px;'/>
    but this is not working for me. as i said i am a newby, i have heaps of javascript on this page , and i can sort of work out what they mean, but cannot seem to implement without full instruction. that being said, all other functions on the page are working fine, excpet for this new one..

    just wanted to add a big thankyou for your help !!
    The More I Learn, The More i Have To Unlearn!

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Right, first of all, this does not go in the body. What I posted above goes in the <head>, where all javascript should go. Do a google search on "unobtrusive javascript" and read up on it. This is a good one.

    The whole point of the code I posted is that you do not need inline event handlers. This means you don't need the onclick attribute in the HTML. If you read about unobtrusive javascript you will understand about that. You would also not need all the other junk you have in your textarea tag, like "onselect", "Onclick" and "onkeyup".

    The javascript I posted needs to go in the <head>, preferably in a separate javascript file. E.g.:
    HTML Code:
    <script type="text/javascript" src="textareagrow.js"></script>
    Then your HTML should look like this:
    HTML Code:
    <textarea name="message" id="message" wrap="virtual" tabindex="1" class="post"></textarea>
    <button id="add_plus" class="liteoption">+</button>
    <button id="add_minus" class="liteoption">-</button>
    It looks a lot neater, don't you think? The javascript does this:
    • When the page has finished loading, look for the "message" textarea
    • Add "click" event handlers to the plus and minus buttons, which we are finding via their IDs
    • When they are clicked, get current textarea height and change it accordingly
    Things to note about the HTML:
    • Use double quotes for HTML attributes.
    • Don't use inline styles (like style="width:80px"). That's what CSS is for.
    • CSS makes maintaining the page easier, makes loading your page somewhat faster (less clutter in the HTML) and makes everything neat and tidy.
    • The <input> elements don't need a name attribute since they are not things that need to be POSTed with the form. In fact, you should not be using <input> but <button> instead, which you can see above. Again, much neater.
    • If I were you, I would not use tabindex. It will just confuse the user.
    I hope you read what I've written carefully and instead of blindly copying and pasting code randomly into the <body> you try to understand what is going on.

  6. #6
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks heaps, i got it working - thanks everyone who helped, i combined all ideas and came up with a solution that worked 100&#37;, and i can even change how much i want the textarea changed in height by px.
    The More I Learn, The More i Have To Unlearn!

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw thanks heaps Raffles, now that i have solved the problem and come up with a code i can follow your excellent examples. I am new to .js files so i will read up on how to set everything out, and remove it all from the php/html.

    thankyou
    The More I Learn, The More i Have To Unlearn!

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No problem, glad I could help.


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
  •