Javascript Tutorial - Resizeable Textboxes

So something that seems to be popping up a bunch on various sites lately is the resizeable textbox. Some are implemented with a resize handle on the corner, others let you drag any of the sides. I thought they were kind of cool, so I sat down to see how hard it would be to write. And, surprisingly enough, it is actually pretty easy. So today I'm going to walk through some resizeable textbox code. It is not very pretty, either code-wise or look-wise, but it does get the job done.

So what we are going to create today is a textbox with resize handles on the bottom, right, and bottom-right corner. The resize handles do what you might expect - grabbing the right edge will let you resize the width, grabbing the bottom will let you resize the height, and grabbing the corner will let you resize either. The bulk of the work is actually done by code in a previous tutorial, about how to do dragging in javascript. So you will probably want to read that before you continue.

So here is the example. Ugly, but pretty cool:

Because we have the drag object from the draggable elements tutorial, the code is actually pretty simple. So lets take a look at the html first:

Not really much there. First there is a surrounding div, so that we can position the other elements against it. The textarea is in the upper left, and is initially set to take up 90px by 90px. On the right side, we have a 5 pixel wide red div, 95 pixels from the left. This div is the right resize handle. The reason we leave a 5 pixel gap between the texarea and the handle is that for some reason a 90px textarea takes a little bit more than 90 pixels when the scrollbar appears. So we leave those 5 pixels free to give the textarea some breathing room. Next, we have our green corner resize handle, a 5x5 pixel div at position 955x95. Finally we have the blue bottom resize handle, 5 pixels tall and 95 pixels from the top. Giving the divs the appropriate resize cursors is really easy - we just set the cursor style attribute the way we want.

Ok, on to the javascript initialization code:

We first grab the various elements and store them in variables, mostly because we are going to be accesing them so much. No need to make the browser waste time looking them up again and again. Next, we make the three dragObject instances, one for each of the handles. We hand each a minimum and maximum bound. By handing 0 in for both the y min and y max on the right handle, we ensure that we can only move left and right, and not up and down. This is also why we pass in 0 as the x min and max on the bottom handle - we only want to be able to move that handle up and down, not left and right. The 15 and the 500 that we pass in as the rest of those bounds allow us to set a minimum and maximum size on the textbox. By passing in 15 as the x min and 500 as the x max for both the right and corner handle, we make it so that the textbox can't be made bigger than 495px wide and can't be made smaller than 10px wide (the 5px difference is because of that breathing room we gave the textbox earlier). The same thing applies to the height, because we pass in 15 as the y min and 500 as the y max on both the bottom handle and the corner handle.

The other important argument here is the callback functions RightMove, BottomMove, and CornerMove. Everytime one of the handles is moved, the appropriate callback will be called (because of code deep inside the dragObject). So lets take a look at what these functions do:

Wow, there is virtually nothing there. But before we move to the DoHeight and DoWidth functions, lets review what these arguments are. The newPos is a position object holding the (top,left) position of the element that is being moved. The element variable is the exactly what it sounds like - the element being moved.

Ok, now on to where the real work happens:

These two functions do exactly what they sound like they do - they calculate the new width and height of the textbox (and move and resize the handle elements as appropriate). In both, we first adjust the size of the big container div, taking into account the width (or height) of the handles. Then, if the corner handle is not the one doing the resizing, we move it into place (if it is the one doing the resizing, it is already in place). For the right handle, if it is a height resize, we update the height of the handle. If it is a width resize, we check to make sure it is not being done by the right handle, and if it is not, we update the x position of the handle. For the bottom handle, we doing essentially the same thing, except we update the width during the width resize, and the y position during the height resize. Finally, we update the size of the actual textbox, taking into account the breathing room.

And that is it! With that code, and the dragging code, you can get resizeable textboxes. It is true that these are pretty ugly and limited, so don't be surprised if at some point in the future we have a resizable textboxes 2.0 tutorial. But until then, feel free to leave questions or comments.