Okay, it’s about time for a post about web programming. Maybe this one will be of use to some of my visitors.
Now I know, in this age of Twitter and 140 character tweets, that small text areas can accommodate much of what people need to type in text areas on the web. And some sites have expanding text areas, so that they grow taller as you type more. That’s pretty cool for those of us who like to review what we type after we type it, before we submit it.
If I need to type much more than a tweet’s worth of text, I like to see as much of it as possible without having to scroll the text area. For instance, on some sites, there’s an “about me” area that you can customize, and some of these sites allow you to put lots of text there, but provide a text area that’s only about 100 pixels tall, which lets you see maybe 4 to 6 lines at a time. I’d rather see about 30 lines at a time.
Some sites allow you to configure the text areas they provide for your use, or, as mentioned above, give you text areas that dynamically change as you type in them. But on those sites that don’t give you the means to configure the size of text areas and don’t provide dynamic ones, you’re pretty much stuck with whatever size of text area they give you—unless you know JavaScript.
So here’s some JavaScript I came up with to allow me to doctor up a web page and place “Expand” and “Collapse” links just above each text area on the page. It isn’t guaranteed to work for every text area you come across, because some are controlled by other programming on the page. And it only works with native HTML text areas—it won’t work for text areas in Java applets or Flash apps, for instance.
The following link is a JavaScript bookmarklet that you can simply bookmark and use:
Modify Text Areas
Once you save the above link as a bookmark, you can try it out on the text areas below. Don’t click the “Modify Text Areas” link on this page, click your bookmark instead. When you do, you should see a link with the label “Expand” appear just above each of the text areas on the page. Click one of these “Expand” links and watch the height of the text area expand, and the link label change to “Collapse”. Click the “Collapse” link and the text area will shrink (though not necessarily to its original size). Each text area has its own link, so you can expand or collapse each of them independently.
Now go to another web page with small text areas, and use your bookmark there.
That’s all there is to it. Disclaimer: There are no guarantees that this bookmarklet will work in any given situation. I’ve only tested this in Firefox 3 and IE8, but I suspect it will work in most other modern browsers as well. You will have to click the bookmark each time you visit a page with text areas if you want to use the feature; the change it makes to the page is not a permanent one that will persist across all visits to the page. And like I said above, it won’t work with every small text area you encounter on the web, because of programming in the page that overrides the bookmark code. But in cases where the bookmark code does work, it’s nice to be able to see several lines at once, with no need to constantly be scrolling the text area so you can review what you’ve typed before you click that Submit button. Enjoy!
