Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Expanding textarea

By: MMiszy on Nov 1st, 2011  |  syntax: HTML 5  |  size: 1.89 KB  |  views: 257  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <title>Expanding textarea</title>
  6.    
  7.     <style>
  8.         textarea, pre {
  9.             border: 0;
  10.             margin: 0;
  11.             outline: 0;
  12.             padding: 0;
  13.         }
  14.        
  15.         .expanding {
  16.             border: 1px solid #666;
  17.             position: relative;
  18.             width: 615px;
  19.         }
  20.        
  21.         .expanding > pre,
  22.         .expanding > textarea {
  23.             background: transparent;
  24.             min-height: 100px;
  25.             padding: 2px;
  26.             white-space: pre-wrap;
  27.             word-wrap: break-word;
  28.         }
  29.        
  30.         .expanding > textarea {
  31.             width: 100%;
  32.             height: 100px;
  33.         }
  34.        
  35.         .expanding > pre {
  36.             display: none;
  37.         }
  38.        
  39.         .expanding.active > textarea {
  40.             height: 100%;
  41.             left: 0;
  42.             overflow: hidden;
  43.             position: absolute;
  44.             resize: none;
  45.             top: 0;
  46.         }
  47.        
  48.         .expanding.active > pre {
  49.             display: block;
  50.             visibility: hidden;
  51.         }
  52.     </style>
  53.    
  54.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  55.    
  56.     <script type="text/javascript">
  57.         function makeExpanding(cont)
  58.         {
  59.             cont.addClass('active');
  60.             cont.prepend('<pre><span></span><br></pre>');
  61.             var textarea = cont.children('textarea');
  62.             var span = cont.find('span');
  63.            
  64.             textarea.bind('input', function(){
  65.                     span.text(textarea.val());
  66.                 });
  67.  
  68.         }
  69.         $(document).ready(function(){
  70.             makeExpanding($('.expanding'));
  71.         });
  72.     </script>
  73.    
  74. </head>
  75.  
  76. <body>
  77.  
  78. <div class="expanding">
  79.    
  80.     <textarea>dadas</textarea>
  81. </div>
  82.  
  83. </body>
  84. </html>
  85.  
  86.  
clone this paste RAW Paste Data