Find file
Fetching contributors…
Cannot retrieve contributors at this time
41 lines (37 sloc) 1.76 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo - Elastic</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style>
body,html { margin: 0; padding: 0; background: #E0F4F8; }
.label { background: #FFCC33; padding: 5px; font: bold 10px Arial, sans-serif; position: absolute; top: 0;left: 0; }
.form { padding: 20px 20px 10px; background: #E0F4F8; width: 580px; overflow: hidden; }
.form p { margin: 0 0 10px 0; float:left; clear:both; display: block; }
.form label { font: bold 0.9em Helvetica, Arial, sans-serif; color: #0077AA; padding: 0 0 0 5px;}
.form .w { float: left; clear: both; padding: 5px 5px 0; background: #D7EBEF; font: bold 0.8em Helvetica, Arial, sans-serif; color: #333; overflow: hidden; }
.form .w span { padding: 0 0 5px; float:left; }
.form .input { border: 1px solid #A5C2C8; padding: 5px 5px 5px 5px; margin: 0 0 5px 0; width: 537px; font: bold 16px/20px Helvetiva, Arial, sans-serif; }
.form .w label { padding:0; }
</style>
</head>
<body>
<div class="form">
<p>
<label>Fill the textarea to make it grow</label>
<span class="w">
<textarea class="input">This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.</textarea>
</span>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.elastic.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('textarea').elastic();
});
// ]]>
</script>
</body>
</html>