This is intended for all the Nigerian Javascript Developers that are using or want to start using the jQuery Javascript Framework. This Thread focuses on speeding up the usage or understanding  of the  Framework.
Post your puzzles and find solutions from other jQuery veterans.

you are back again. welcome.

Jquery's fun quick to grasp and the best part i love bout it are the callback and chaining of codes.My favourite code so far.Animate. Try visual jquery makes understanding fast.

I one of my project i was wondering how to build an auto grow textarea box. What i mean is a textarea control that automarically grows when you are typing in it much like what you have on FB, so i googled for a jQuery plugin and found one written by John (the author of JQuery) and one of his friend, so i thought since he is the author of the framework why won't the plugin work. Well to my surprise it was not efficient and kind of like freezes the browser intermittently. So i googled around further looking for a better option,when i was getting no positive result. i decided to think it through and implement it.
What is the logic? simple, when the textarea in question gets a focus create a div element that has Exactly the same style as the textarea  and insert it immediately after the textarea. When characters are typed into the textarea replicate it in the div you created and watch the height of the div. Whenever the div height changes it is time to change the height of the textarea by whatever amount the div's height changed.This could be a shrink or an expansion.
Armed with this knowledge  i set out to implement it. First i want the to target the onfocus event of the textarea and i want the code not to recreate the div whenever the textarea loses and regains focus, so i will need an object that instantiates itself whenever the textarea gets focus but checks if the div already exists or not. Secondly i want the code to be decoupled so that i can reuse it as many times i want and on as many textarea a can be found on the page.
Since all the textarea i am using a style by a single class and they each have an id and a name.  i create an instance of the autogrow object with the id of each textarea, Lastly i want to control the maximum number of characters that can be typed and i want it to be dynamic.

With this requirements in mind below is the implementation:

function CDeveloperGrow(obj)
{
    this.id=obj.id;
    this.clone=null;
    this.maxlength=430 // default
    this.classname=null;
    this.extra=16; // the space between the character and the bottom border of the textarea
}

CDeveloperGrow.prototype={

trackThis:function()
{

      this.clone= this.id+"_clone";
    /**
     * Check if we have created the div clone before
     * and create it if it has not been created
     */
     if(!jQuery("#"+this.clone).length>0)
     {
          //create the clone div
           var div=jQuery("<div id='"+this.clone+"' ></div>";
           jQuery("#"+this.id).after(div);
           div.addClass(this.classname).addClass("autogrow";
     }
      //track the keydown and keyup event,watch for closure tricks ,var that and var this
       var that=this;
      jQuery("#"+this.id).bind("keydown",function(){
                                                                                 that.onHeightChange();
                                                                               }
                                             ).bind("keyup",function()
                                                                               {
                                                                                  that.onHeightChange();
                                                                              });

  //fire the first event monitor
   this.onHeightChange();

},
setFocus:function(cls,len)
{
   this.classname=cls;
   this.maxlength=len;
   this.trackThis();
},
onHeightChange:function()
{
               //get the current char and the length of the char from the textarea
               var txt=jQuery("#"+this.id).val().replace(/(&lt;|>/g, '').replace(/\n/g,"<br>|";
		var len=txt.length;
                //get a reference to the clone div
		var div=jQuery("#"+this.clone);

              //check for change in contents
		if(txt!=div.html())
		{
               		   div.html(txt);
			var h=div.height();
			
			var newh=h + this.extra;
                        //check for maximum length
			if(len>=this.maxlength)
			{
				jQuery("#"+this.id).val(txt.substring(0,this.maxlength));
			}else
			{
                               // returns the textarea box to its original height when the backspace is hit several times to clear the char
				if(len<=3)
				{
					return;
				}
				jQuery("#"+this.id).css({
					"height": newh + "px"
				});
			}
		}
}
};

That completes the code and it work with jQuery library
in addition to the code you need to define a css class named"autogrow"  and set the height propertity to auto; this will enable the clone div to automatically expand or shrink in addition to the css class of the textarea

Also use css class to define the height and width of the textarea, Don't use rows and cols

for eample if i want to use this code for a textarea that has the following rules:

CSS:
.test
{

width:300px;
height:25px;
overflow-y:hidden;
font-size:12px;
font-weight:normal;
color:#333;
}

.autogrow
{
height:auto;
}

i will attach the code like this

<textarea id='growthis' name='growthis' class='test' onfocus="(new CDeveloperGrow(this)).setFocus('test',300)"></textarea>

This is just about the mystery of auto grow and you can test it, tweak it, use it for you next stunning project and enjoy it. if you have an issue hala back
NOTE: jquery library must be loaded  in other for this to work or better still you can re-factor the code and remove the jQuery thing

That's some hard code nice one.I don't know if this alternative works.Theoretical maybe like declare all textarea a specific height like 10px then a function like onkey it should grow with some px like even the animate function could work with some nice fade effect.But i prefer yours since i can declare once and give all to textarea.

That's some hard code nice one.I don't know if this alternative works.Theoretical maybe like declare all textarea a specific height like 10px then a function like onkey it should grow with some px like even the animate function could work with some nice fade effect.But i prefer yours since i can declare once and give all to textarea.

After reading up on YUI, jQuery and MooTools, I settled on jQuery because of its similarities with javascript. As they say, what you don't use, you lose - Fortunately or unfortunately, due to googling for one plug in or the other, all I do is install and use, without studying the jquery behind it, unless of course, I need to customize the script to meet my needs.

Because of the above, I dare not jquery on my resume as I don't and probably won't know it down pat.