Grow text areas automatically in response to input

diff --git a/app/assets/javascripts/site.js b/app/assets/javascripts/site.js
index 9a43be0d6d8b58e9fae0127e6a92bd28feafebb4..95815d44efd3b3f29c2470a38d43f6845d5a6dde 100644 (file)
--- a/app/assets/javascripts/site.js
+++ b/app/assets/javascripts/site.js
@@ -1,5 +1,6 @@
 //= require jquery
 //= require jquery_ujs
+//= require jquery.autogrowtextarea
 
 /*
  * Called as the user scrolls/zooms around to aniplate hrefs of the

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index e52cc2356b8546ac2561edf104d9c365d2f1280f..33e95f6a2ff3d6b82bf456db13b5e8721042c1ef 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -143,8 +143,9 @@
     <script type="text/javascript">
     $(document).ready(function () {
       var auth_token = $("meta[name=csrf-token]").attr("content");
-
       $("form input[name=authenticity_token]").val(auth_token);
+
+      $("textarea").autoGrow();
     });
     </script>
 

diff --git a/vendor/assets/jquery/jquery.autogrowtextarea.js b/vendor/assets/jquery/jquery.autogrowtextarea.js
new file mode 100644 (file)
index 0000000..8666c55
--- /dev/null
+++ b/vendor/assets/jquery/jquery.autogrowtextarea.js
@@ -0,0 +1,61 @@
+/*!
+ * Autogrow Textarea Plugin Version v2.0
+ * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
+ *
+ * Copyright 2011, Jevin O. Sewaruth
+ *
+ * Date: March 13, 2011
+ */
+jQuery.fn.autoGrow = function(){
+       return this.each(function(){
+               // Variables
+               var colsDefault = this.cols;
+               var rowsDefault = this.rows;
+               
+               //Functions
+               var grow = function() {
+                       growByRef(this);
+               }
+               
+               var growByRef = function(obj) {
+                       var linesCount = 0;
+                       var lines = obj.value.split('\n');
+                       
+                       for (var i=lines.length-1; i>=0; --i)
+                       {
+                               linesCount += Math.floor((lines[i].length / colsDefault) + 1);
+                       }
+
+                       if (linesCount >= rowsDefault)
+                               obj.rows = linesCount + 1;
+                       else
+                               obj.rows = rowsDefault;
+               }
+               
+               var characterWidth = function (obj){
+                       var characterWidth = 0;
+                       var temp1 = 0;
+                       var temp2 = 0;
+                       var tempCols = obj.cols;
+                       
+                       obj.cols = 1;
+                       temp1 = obj.offsetWidth;
+                       obj.cols = 2;
+                       temp2 = obj.offsetWidth;
+                       characterWidth = temp2 - temp1;
+                       obj.cols = tempCols;
+                       
+                       return characterWidth;
+               }
+               
+               // Manipulations
+               this.style.width = "auto";
+               this.style.height = "auto";
+               this.style.overflow = "hidden";
+               this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";
+               this.onkeyup = grow;
+               this.onfocus = grow;
+               this.onblur = grow;
+               growByRef(this);
+       });
+};