No Max-height Fixed
In this JQuery tutorial we will develop a program that Auto generate of a Textarea with minimum fixed height but no max height fixed.
Steps to develop the Auto generate of a Textarea with minimum fixed height but no max height fixed .
Step 1:
Create a new file (autoGrowText.html) and add the following code into it:
|
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Tabs</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script/jquery.autogrow.js"></script> <script type="text/javascript"> $(document).ready (function() { $('textarea.expandText').autogrow(); }); </script> <style type="text/css"> textarea.expandText { line-height: 10px; } </style> </head> <body> TextArea Min-Height 100Px <textarea style="width: 300px; min-height: 100px;" class="expandText" name="myTextarea"> </textarea> </body> </html> |
Program explanation:
The following code includes the jQuery JavaScript library file:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script/jquery.autogrow.js"></script>
The Code
$('textarea.expandText').autogrow();
This function works auto generate the textarea of id "expandText"
and having correponding style css.
textarea.expandText {
line-height: 10px;
}
This increase the height 10px per line and Minimum height 100px
Output :
Min Height : 100 px
No Max- Height
Output :
Check online demo of the application
Learn from experts! Attend jQuery Training classes.