changes to allow resizing, and to not affect the style of outer box

c/css/screen.css

@@ -13,7 +13,7 @@ h1.compress {
 }
 
 .json_input:focus {
-	border-width: 0;
+	border-color: transparent;
 	outline: none;
 	background-color: #EEEEEE;
 }

c/js/jquery-linedtextarea/jquery-linedtextarea.css

@@ -4,6 +4,8 @@
  *
  * Copyright (c) 2010 Alan Williamson
  *
+ * Contribution done by Ryan Zielke ([email protected])
+ *
  * Released under the MIT License:
  * http://www.opensource.org/licenses/mit-license.php
  * 
@@ -20,9 +22,12 @@
  *
  */
 
+textarea { resize:both; } 
+
 .linedwrap {
 	border: 1px solid #c0c0c0;
 	padding: 3px;
+	display: inline-block;
 }
 
 .linedtextarea {

c/js/jquery-linedtextarea/jquery-linedtextarea.js

@@ -4,6 +4,8 @@
  *
  * Copyright (c) 2010 Alan Williamson
  * 
+ * Contributions done by Ryan Zielke ([email protected])
+ *
  * Version: 
  *    $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z alan $
  *
@@ -22,6 +24,7 @@
  *   });
  *
  * History:
+ *   - 2011.12.08: Changes to allow resizing and not affect styling of the outer div
  *   - 2010.01.08: Fixed a Google Chrome layout problem
  *   - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
  *   - 2010.01.06: Initial Release
@@ -61,18 +64,16 @@
 
 			/* Turn off the wrapping of as we don't want to screw up the line numbers */
 			textarea.attr("wrap", "off");
-			textarea.css({resize:'none'});
+			textarea.css({resize:'both'});
 			var originalTextAreaWidth	= textarea.outerWidth();
 
 			/* Wrap the text area in the elements we need */
-			textarea.wrap("<div class='linedtextarea'></div>");
-			var linedTextAreaDiv	= textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
+			var linedTextAreaDiv	= textarea.wrap("<div class='linedwrap'></div>");
 			var linedWrapDiv 			= linedTextAreaDiv.parent();
 
 			linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
 
 			var linesDiv	= linedWrapDiv.find(".lines");
-			linesDiv.height( textarea.height() );
 
 
 			/* Draw the number bar; filling it out where necessary */
@@ -94,8 +95,8 @@
 			var linedWrapDivNewWidth 	= originalTextAreaWidth - paddingHorizontal;
 			var textareaNewWidth		= originalTextAreaWidth - sidebarWidth - paddingHorizontal;
 
-			textarea.width( textareaNewWidth );
-			linedWrapDiv.width( linedWrapDivNewWidth );
+			textarea.width( textareaNewWidth);
+			textarea.css({maxWidth: textareaNewWidth - 6}); //TODO make this calculated
 
 
 
@@ -114,7 +115,16 @@
 				var domTextArea	= $(this)[0];
 				linesDiv.height( domTextArea.clientHeight + 6 );
 			});
-
+
+
+			window.setInterval( function(tn) {
+				linesDiv.height(textarea.height());
+				var scrollTop 		= textarea[0].scrollTop;
+				var clientHeight 	= textarea[0].clientHeight;
+				codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
+				lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
+			},10);
+
 		});
 	};