Javascript Controls - Resizeable Textbox, Part Tres

I know, I know, you are all saying "resizeable textboxes again!?" - but don't worry, we got some new stuff to throw out there today. So we initially covered resizeable textboxes in this post, and did a follow up just last week in this post. But one of the other guys here at Switch On The Code said that while the resizeable textbox was relatively easy to use and insert, it wasn't easy enough. "Make it as easy as adding Google Adsense" he said. And so I poked and prodded and redid how you add resizeable textboxes to a page.

It actually isn't that much of a change from how adding the resizeable textbox worked before, and what did change is pretty cool, so we are going to go into some detail on how it works. We are also going to update our previous controls with this new method as well (the spin control and the trackbar), but for those we are just going to add an addendum onto those posts. And so below we have our classic example of the resizeable textbox - hopefully, it looks exactly the same as it did before. The only difference now is that the code to add it just got a bunch simpler:

And here is the entire block of code required to do exactly that:

The key here is the ability to add in place - i.e., wherever you put the javascript block that creates the textbox, that is where the textbox appears. Here, the javascript block is inside that container div, so the resizeable textbox is added inside of that div. If you have ever used Google Adsense, you might notice the similarity - where ever you put a Google Adsense script block, that is where the ad appears.

So how do we do this? It actually is pretty simple, although it is kind of ugly. You will see what I mean as you read the code:

This is a chunk of code from the Resizeable Textbox object, where the actual insertion of the object into the document is taking place. Essentially, what we need to do is find where in the document we currently are, so that we can add the textbox here. We do this by writing a temporary element to the document using document.write - and the document.write call will write the element immediately after the end of the current element, i.e., the script element creating the textbox. Then we retrieve the element using getElementById, and use a replace child to replace the temporary element with the actual textbox container element.

There are a couple oddities there you might be wondering about. First, what is all the fuss in the code around creating an id for the temporary element? Well, we need all that to make sure that the id is absolutely unique in this document, because we need to retrieve the element object again using getElementById. So we go to great lengths to create a random id, and if for some crazy odd reason that id is actually in use, we add even more randomness on top of it until we get a unique id. The other question you might have is why we don't just write the entire component out to the page using document.write. Really, it was just a lot easier to do given the current structure of the resizeable textbox code, since it was written using a lot of document.createElement and no strings of html code.

We made two other small changes to the resizeable textbox code, and they also have to do with ease of use and ease of adding one to a page. We made two optional constructor arguments, the first one being the id you want the textarea to have, and the second being the element you want the resizeable textbox added to (in case you don't want it added directly where the javascript block is). So, for instance, you could create a resizeable textbox like so:

That would create a resizeble textbox in place, with the ID and name set to "MyBestID".

Or you could create one like this:

And this would create a resizeable textbox, add it to the element with the id 'MyFavElement', and set the ID and name to 'MyBestID'.

And that is it for this update to the resizeable textbox control! Hopefully, you are having fun with this control, and if you have any ideas for making it even easier to use, just let me know. As always, you can download the full source, and if you have any questions please leave them in the comments.