|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
