The other day I was looking for a solution to allow a user to dynamically resize a textbox. I first saw this feature in wordpress and wanted something similar for a site I was designing. Since wordpress is open source I had considered looking at their code to figure out how it was done. After searching google for a few minutes I came across a site that had put together some functions to make the job of implementing this feature very easy.

When the textbox is displayed on a site it looks like the following:

In order to place the texbox on your site you just need to download the source code and put something like the following on a webpage.

%MINIFYHTMLdff2f1cebcbe13db5d38a6c80f4090f38%

    <script type="text/javascript">
    
    

Doesn’t get much easier!

Now to critique the code a little. I wish the javascript functions were encapsulated in a class so I would not have to worry that another function might conflict with the functions for resizing the textarea. This is a fairly easy feature to add so it does not bother me to much.

In testing this code I found out that both Chrome (Google’s browser) and Safari already have the ability to dynamically resize a textarea built into the browser. Both browser’s implemented the feature by adding a little icon in the bottom right of the textarea. This is a nice feature and hopefully the other browsers will also add this feature to their future versions.

Now, if you are implementing the code on this page to give all browsers the ability to dynamically resize the textarea. You may want to disable the built in resize feature of both Chrome and Safari. This can easily be done with the following css.

#myRT{resize: none;}