Javascript Controls - Resizeable Textbox

A few weeks ago, we posted a tutorial on how to make a Resizeable Textbox. It was a pretty rough example - it just showed off the raw code that made it work, and the example was pretty ugly. Well, the example ended up being quite popular (for reasons beyond our comprehension), so we decided to take another pass at the code. So this post is about our new resizeable textbox control - much easier to use, more self-contained, and a whole lot prettier. Oh, and we got rid of a couple bugs too.

So the basic functionality is the same as in the previous tutorial - there are resize handles on the bottom edge, the bottom-right corner, and the right edge. The resize handles do exactly what you might expect - grabbing them by the edge will let you resize the textbox. We aren't going to go into a lot of detail as to how the underlying code actually works - if you care to find out, though, you can read through the previous tutorial.

As you can see, it looks a whole lot prettier now than the example from before (or at least, I hope you think it looks nicer). It also may be noticable that we got rid of some of the pixel offset bugs between Firefox and IE, and when the scrollabrs appear they don't get cropped off by the drag edges. But by far the best improvement over the previous iteration is how easy it is to create and use. Like the recent javascript controls here at Switch On The Code, we went with an object based approach. For example, below is the entirety of the code for the example above. First, the simple html container:

And now the couple lines of javascript to create and add the textbox:

Most of that should look extremely familiar if you have read any of the other Javascript Controls tutorials - we have kind of standardized on a way of packaging these controls. Essentially, here we are first creating the textbox, and then we set its initial text. Then we set some position information on its container (since in this case I want it offset a bit from the upper left corner of its soon-to-be parent), and then we set the maximum height and width that a person can expand the textbox to. Then, as with our other controls, we add the container element onto the actual page (in this case inside of the 'rtContainer'), and tell the control to start listening for resizing events. Simple, eh?

So that is how you would add the control to a page - now lets take a look at what else you can do with it. Here is an outline of the public functions on the ResizeableTextbox object:

Most of these function names are pretty self-explanatory, but I'll give a short sentence or two on each of them.

GetContainer

This function returns the html element that contains the control - in the case of the resizeable textbox, it is a div. This element is what you add to the DOM when you want to add a resizeable textbox control to the page (like we did earlier with the example).

GetTextArea

This function returns the actual textarea html element inside the resizeable textbox control. This is useful in case you want to set some properties on the textarea itself - for instance, setting it so that the scrollbars never appear. You shouldn't change style info like position or size directly on the textarea element, though (it would break everything) - we have other functions that let you do that.

Get And Set CurrentWidth

These two functions do exactly what you might expect - one returns the current width of the resizeable textbox control, and the other sets the width to the new given value. By default, this value starts off as 100 pixels. If you set a value through here, it is still constrained by the max/min width set on the control, so if you have a max width set of 10 and you try to set the new width to 20, the new width will actually be set to 10.

Get And Set CurrentHeight

These functions are exactly like Get and Set CurrentWidth, except these deal with the height of the control. Again, by default, the height is 100 pixels.

Get And Set MinWidth

These two functions let you get and set the minimum width for the control (i.e., limit how small a user can make the control). By default the value is 38 pixels. As a side note here - if you try to set the minimum width to anything less than 38, the minimum width is set to 38 pixels. This is because the handles and other images surrounding the textbox cannot get any smaller than 38 pixels across.

Get And Set MinHeight

Just like Get and Set MinWidth, except that it sets the minimum height of the control. By default, the minimum height is 38 pixels - and, as with the width, you can't set a minimum smaller than 38.

Get And Set MaxWidth

These two functions let you get and set the maximum width for the control (i.e., limit how big a user can make the control). By default, the maximum width is 500 pixels.

Get And Set MaxHeight

Just like Get and Set MaxWidth, except for the height of the control. By default, the maximum height is 500 pixels.

Get And Set Text

Using these functions, you can get/set the text currently in the resizeable textbox. Cause really, what is the point of having a textbox if you can't get to the contents? :P

StartListening and StopListening

And finally, these functions attach and detach all the needed events for the resizing of the textbox to work. When the resizable textbox control is first created, it is not listening - after you add it to the DOM, you need to call the StartListening to enable the control. The reason it does not listen initially is that until it is added to the DOM, event attaching does not work. Yeah, we know it is an annoyance, and we are trying to find a clean way around it - for now, you'll just have to call StartListening after you add the control.

And there you go! Everything you need to know in order to work with this control. Sadly, we didn't make the textbox themeable - although really it wouldn't be that hard for you to do if you needed the handles/borders a different color. First, there are a couple places in the style sheet you can make changes:

As you can see, you can easily set the coloring of the textarea itself, and you can set the colors of the left and top edges of the control. However, since the bottom and right edges are all images, to change their coloring you will have to modify the images directly. If someone requests it, we will do the same thing for this control as we did with the spin control (use partly transparent pngs as masks and let a background color shine through to give coloring), but for now we didn't feel the need.

And that is all there is to it. Here is the source code download link again, which is a zip file that includes the javascript, the css, the handle and repeater images, and a small example html page. If you have any questions on how to use the control, or any questions on the inner workings, please leave a comment.