Jump to content

problem with expand textarea?


fdark
 Share

Recommended Posts

hello....I have problem...I using textarea expander like google translate but when textarea expand to bottom ,coloumn in right/beside expand to bottom too....I have use position absolute but it still doesn't work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Title of the document</title><style type="text/css">textarea { float:left;border:1px solid green;clear: both;font-family: sans-serif; font-size: 1em; width: 95%; padding: 0px; </style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" >/** * TextAreaExpander plugin for jQuery * v1.0 * Expands or contracts a textarea height depending on the * quatity of content entered by the user in the box. * * By Craig Buckler, Optimalworks.net * * As featured on SitePoint.com: * [url="http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/"]http://www.sitepoint.com/blogs/2009/07/29/...ing-textarea-1/[/url] * * Please use as you wish at your own risk. *//** * Usage: * * From JavaScript, use: *     $(<node>).TextAreaExpander(<minHeight>, <maxHeight>); *     where: *       <node> is the DOM node selector, e.g. "textarea" *       <minHeight> is the minimum textarea height in pixels (optional) *       <maxHeight> is the maximum textarea height in pixels (optional) * * Alternatively, in you HTML: *     Assign a class of "expand" to any <textarea> tag. *     e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea> * *     Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height. *     e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea> *     The textarea will use an appropriate height between 50 and 200 pixels. */(function($) {	// jQuery plugin definition	$.fn.TextAreaExpander = function(minHeight, maxHeight) {		var hCheck = !($.browser.msie || $.browser.opera);		// resize a textarea		function ResizeTextarea(e) {			// event or initialize element?			e = e.target || e;			// find content length and box width			var vlen = e.value.length, ewidth = e.offsetWidth;			if (vlen != e.valLength || ewidth != e.boxWidth) {				if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";				var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));				e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");				e.style.height = h + "px";				e.valLength = vlen;				e.boxWidth = ewidth;			}			return true;		};		// initialize		this.each(function() {			// is a textarea?			if (this.nodeName.toLowerCase() != "textarea") return;			// set height restrictions			var p = this.className.match(/expand(\d+)\-*(\d+)*/i);			this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);			this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);			// initial resize			ResizeTextarea(this);			// zero vertical padding and add events			if (!this.Initialized) {				this.Initialized = true;				$(this).css("padding-top", 0).css("padding-bottom", 0);				$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);			}		});		return this;	};})(jQuery);// initialize all expanding textareasjQuery(document).ready(function() {	jQuery("textarea[class*=expand]").TextAreaExpander();});</script><script type="text/javascript">function showHint(str){if (str.length==0)  {  document.getElementById("txtHint").innerHTML="";  return;  }if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","data.php?title="+str,true);xmlhttp.send();}</script></head><body><form id="myForm" method="get" action="article.php"><table><tr><th   width="400px"><font color="green" face="sans-serif" size="3">Article</font></th><th  width="400px"><font><b>description</b></font></th></tr><tr><td><textarea  rows="7"  cols="60" onkeyup="showHint(this.value)" class="expand50-600" ></textarea></td><td><span id="txtHint" ></span></td></tr></table></form></body></html> 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...