So a long while ago (last November), we posted some tutorials on how to create a resizeable textbox (Part 1, Part 2, and Part 3). We even did a post on how you could integrate the new textbox into Wordpress. Well, I got a request recently to expand the resizeable textbox code so that it could be a resizeable container for anything on a web page. So the result of that request is what we are going to be taking a look at today.

So first, lets get the html portion out of the way (not that there is much):

Ok, so that outer div is just a border box, just there as to be a simple visual container. The next element is the element that we want to resize, in this case an image. The element that you want to resize can be anywhere in your html - the only requirement is that it comes before the chunk of javascript that creates the resizeable container. This is because the element to resize needs to be created before the resizeable container is created (so that the container can refer to the element). You also need to give the element to resize some sort of unique id - in this case, it is named 'resizeableElement'.

Now comes the javascript initialization chunk. Here, we create a new ResizeableContainer, and the argument to the constructor is the id of the element that we want to make resizeable. This container will get inserted exactly where the script tag is (kind of like Google Adsense), and so all that is left to do is adjust the position a little bit and set the max size values. It should all look very similar to the old resizeable textbox code.

Now onto the javascript. The first change that had to be made is that we renamed the object from ResizeableTextbox to ResizeableContainer - pretty self explanatory, I would hope. The constructor arguments didn't change, but unlike before, the first argument is always required. It used to be that creating a ResizeableTextbox would make the textbox itself, and the first argument to the constructor was an optional id for that textbox. Now, however, the first argument is a required id of the element that will be placed inside of the the ResizeableContainer. So instead of:

We have:

The next change is where we used to create the internal textbox. We replace this code:

With this code:

As you can tell by looking at that changed code, we went from creating the element to grabbing it out of the document. And that is actually it for the functionality changes - the rest were purely cosmetic. For instance, _textArea got renamed to _content, the function GetTextArea got renamed to GetContentElement, and the functions GetText and SetText were removed because they no longer made sense.

Oh, and we can't forget the one change to the style sheet. We went from this:

To this:

The name was changed (another cosmetic thing), but we also removed the background-color style, because we only needed that specifically for the textbox.

And that is it! Even I was surprised at how few changes needed to be made to the resizeable textbox code to allow it to contain/resize other things. Of course, I'm sure there are things that you could put into the resizeable container that would break it - for instance, I bet putting a resizeable container inside of a resizeable container would do bad things - but hey, you shouldn't do that anyway. As usual, you can grab the code for the example above here, and if you have any comments or questions, feel free to leave them below.