ansaurus

Question

Answer 1

+3 A:

jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Steps to use:

You need jQuery. To add it to your page:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;

Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:

<script type="text/javascript"
    src="autoresize.jquery.js"></script>

Next, add a textbox to your page:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;">
    Type something in here, when you get close to the end the box will expand!
</textarea>

Finally, in a script block, add the code that hooks up the plugin to the textbox:

<script type="text/javascript">
    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
            $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
</script>

Robert Harvey 2010-05-27 20:31:57

o that is awesome. just what i needed!!

jpjp 2010-05-27 20:33:30

I'm sorry but I have never used jquery before. may you should me how to get this to work? I downloaded the codes and put them in <script language="javascript">//put the codes here</script>. But the textbox is still the same

jpjp 2010-05-27 20:44:01

Here's a good instructional video: http://www.youtube.com/watch?v=Hk5oXFtYLwEOr you can read the jQuery documentation: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

mVChr 2010-05-27 20:49:48

The textbox doesn't expand. When i press enter, the box doesn't expand. it stays the same size but the words goes above. is the script box just putting in <script language="javascript"></script>?

jpjp 2010-05-27 21:05:57

Yes, if I understand you correctly. See my edit at the bottom.

Robert Harvey 2010-05-27 21:24:50

yes yes I must have accidentally mispelled a word or something. Thank you VERY much for helping a beginner out :DD

jpjp 2010-05-27 21:32:34

Answer 2

A:

there's a website about this http://webdesign.torn.be/tutorials/javascript/prototype/auto-expand-contract-textarea/

UXdesigner 2010-05-27 21:26:34

Answer 3

+1 A:

You can add a library if you care to, or just keep track of the textarea's scrollTop property.

If scrollTop is not zero, add your rows.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
    var who=document.getElementsByName('comments')[0];
    who.onkeyup=function(){
        if(who.scrollTop)who.rows=parseInt(who.rows)+5;
    }
}
</script>
</head> 
<body>
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

kennebec 2010-05-27 21:50:59

ansaurus

tags:

views:

answers:

How do I make a expanding textbox?

related questions