I’ve been accused, in the past, of re-inventing the wheel because rather than grab already created packages for scripting, I like to try to do it myself from scratch, if I can. The efficiency of my approach was proven yesterday as I searched for a way to make text boxes grow the way they do on Facebook.

I looked at the HTML on Facebook, and they used a keypress event to run a function, which was on a separate page that I didn’t want to hunt down. So I used Yahoo to find examples of scripts.

I found one that used jQuery (55k of code if you get the minimal version), plus an additional external script (about 60 lines of code) to do the job…except it wouldn’t work on my site (worked in the demo on the source site).

So I looked through the code to see how they did it, and discovered it was some serious overkill.

I was able to accomplish what they used tons of code to do just a few lines of code.

Here’s the result…

<textarea name="description"
 style="height:28px;overflow:hidden;"
onKeyUp="
if((navigator.userAgent.indexOf('MSIE')>-1) |
  (navigator.userAgent.indexOf('Opera')>-1))
    {
    this.style.height=(this.scrollHeight+14)+'px';
    }
  else
    if(navigator.userAgent.indexOf('Firefox')>-1)
      {
      this.style.height=(this.scrollHeight)+'px';
      this.style.paddingBottom='0px';
      }
    else
      {
      this.style.height=(this.scrollHeight-8)+'px';
      }
  if(this.scrollHeight<28){this.style.height='28px';} "
cols="20"></textarea>

…the part in red is the code that does the work, and the “overflow:hidden” part gets rid of the scrollbar. And here it is in action…

Write something here…

So by ignoring the prepackaged code I was able to accomplish the same result with just a fraction of the coding used by the “re-invented wheel”.

Some times the wheel needs to be re-invented.

UPDATE: Forgot to check browser compatibility. The code above now displays some simple compatibility changes for the way different browsers render the code.

Comments are closed.