Navigate FireThrottle
Login
Members online: 
The Latest...
FireThrottle » Tutorials »
html » Button enlarging/reducing text..Button enlarging/reducing textboxes using JS
EXPANDED VIEW?
Learn how to make those snazzy little buttons which change the textbox\'s size.
In this tutorial, you'll learn how to make a cute little button expanding a textbox by a desired number of columns. This primarily involves javascript and it's pretty easy to understand. This feature can be very useful for things like forums and article writing as the content can vary in length quite a lot. Here is a screenshot of its actual use (in the forums):
The form
| < form name="replyform" id="replyform" method="post" action="replyprocess.php" > < textarea name="message" cols="45" rows="62 class="input" id="message" wrap="physical" >< /textarea > < input name="Submit" type="submit" value="Submit" > < /form > //GET RID OF SPACES BEFORE AND AFTER TRIANGULAR BRACKETS |
Basic stuff...this just creates a form with a multiline textbox with the id 'message' and a submit button. Copy this code anywhere you want in your body.
The javascript
Now that we have our form ready, we need to make our javascript function. Put this in the <head> section of your page:| < script language="javascript" > function change(id, cols, rows) { var txtId = document.getElementById(id); txtId.cols = cols; d = parseInt(txtId.rows); c = parseInt(rows); txtId.rows = d + c; } </script> //GET RID OF SPACES BEFORE AND AFTER TRIANGULAR BRACKETS |
This is slightly more complicated. The first line intializes javascript, the second line creates a function with three arguments (id, cols, rows). The fourth line creates a variable equal to the name of our textbox, as the document.getElementById(id) part gets information from whatever id we specify when calling the function.
The fifth line simply tells javascript to the textbox to keep the current amount of columns.
Lines 6 and 7 turn the variables txtId.rows and rows into numbers. The point of this is so that we can add them numerically, not just add the strings. The variable d contains the current amount of rows, and the variable c contains the amount of rows to be added on.
The eighth line tells javascript to set the textbox row to the sum of d and c (no. of current rows + desired extra rows). Hope that makes sense.
The little image
Last but not least, we have to make the icon which users can click to actually enlarge the textbox. Add this code to the form above the textbox:| < input type="button" class="inputenlarge" onClick="change('message', '45', '6')" value="" title="Enlarge text box" > //GET RID OF SPACES BEFORE AND AFTER TRIANGULAR BRACKETS |
This creates a small button with a class. The onlick event is important: it calls the change() function, and sets the id to message, the number of columns to 45 and the extra number of rows required to 6.
And add this to your head, or your stylesheet:
| .inputenlarge { background-image: url(../images/textboxbig.png); width: 16px; height: 16px; border: 0px; float: right; background-color: #FFFFFF; } |
And then copy this image into your images directory:
Final thoughts...
This is a very simple, but useful feature for any website and the best thing is that it's not obstrusive. To make a button which reduces a textbox's size, simply set the number of rows required to a negative number. Like this:| < input type="button" class="inputenlarge" onClick="change('message', '45', '-6')" value="" title="Reduce text box" > //GET RID OF SPACES BEFORE AND AFTER TRIANGULAR BRACKETS |
If you need any help, please feel free to contact me using the form, or comment here.
Credit to fedekiller to the original code, which I then modified. :)
ice | June 30 2006 | Views: 11781
Rate
Current rating:
Please login or register to rate
Categories
Comments
Present comments
(
3 )
Maybe add something in this tutorial, like how you could set a max numbre of enlargements?
Willy | profile >>
May I suggest the use of the xmp html tag so you don't have to put spaces before and after triangular brackets.
It disables HTML to text.
< xmp > HTML code... < / xmp >
but of course without the spaces 
urmomma | profile >>
Thanks for the tip urmomma. I thought the < code > should do the job, but it obviously doesn't.
ice | profile >>
Expanded view?
Annoyed with the current consise view? View this tutorial in the expanded form:
Expanded view?
