Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
Textarea Resizer JavaScript
The comments textarea resizer is a very popular piece of JavaScript in the world of bloggers. I first saw it in use on Dunstan’s — I even think he wrote the script. (I’m not sure though, as there’s no blog post making it official or anything.)
The old-school document.write() method
Until recently, I was happily using this code:
document.write('<br /><small>(Comment textarea: <a style="cursor: pointer;" onclick="document.getElementById(\'comment\').rows += 5;" title="Click to enlarge the comment textarea">Increase size ↓</a> | <a style="cursor: pointer;" onclick="document.getElementById(\'comment\').rows -= 5;" title="Click to decrease the comment textarea">Decrease size ↑</a>)</small>');I then simply placed a call to the script using some basic XHTML (<script type="text/javascript" src="/include/textarea-resizer.js"></script>), which was not semantic at all. But hey, it worked.
The document.createElement() method
Lately, I’ve been busy converting this site to application/xhtml+xml, which is in fact the correct MIME type for XHTML. One of the problems I ran into whilst doing that, is that when JavaScript is used with XHTML, document.write() doesn’t work. This means that in XML mode, we can’t use the above code anymore. However, document.createElementNS() still works.
In an attempt to make this script work with IE as well, let’s use the createElement() function.
function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}Now, let’s rewrite the code we were using before. Basically, all we need is two links; one to enlarge the textarea, and one to increase its size. Here’s what I came up with:
function textareaResizer() {
var labels = document.getElementsByTagName('label');
for(i=0; i<labels.length; i++) {
if(labels[i].getAttribute("for") == "comment") {
enlarge = createElement('a');
enlarge.setAttribute('style', 'cursor: pointer;');
enlarge.onclick = function () { document.getElementById('comment').rows += 5; }
enlarge.setAttribute('title', 'Click to enlarge the message textarea');
enlarge.appendChild(document.createTextNode('Enlarge textarea \u2193'));
decrease = createElement('a');
decrease.setAttribute('style', 'cursor: pointer;');
decrease.onclick = function () { document.getElementById('comment').rows -= 5; }
decrease.setAttribute('title', 'Click to decrease the message textarea');
decrease.appendChild(document.createTextNode('Decrease textarea \u2191'));
small = createElement('small');
small.appendChild(document.createTextNode(' ('));
small.appendChild(enlarge);
small.appendChild(document.createTextNode(' | '));
small.appendChild(decrease);
small.appendChild(document.createTextNode(')'));
labels[i].appendChild(small);
}
}
}
window.onload = textareaResizer;Note that there’s no need to directly call the script from the XHTML file. Hurrah, semantics! You will need a label for a textarea named comment, though (I have <label for="comment">Your comment:</label> in my comment form). You can see an example below. If you want to try it out on other sites, you could use the User Script extension for Firefox, and put the above code in your userScript.js file. This should work on every non-Kubrick WordPress weblog.
I’m posting this mainly for my own reference, and of course to discuss the techniques used — I’m no JavaScript guru at all.
Comments (21)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (4)
Listed below are resources on the web that mention this article.
-
- Perlworld: Resize Textarea:
Resize Textarea
In a scary bout of premonition, I was taking my daily look at the blog elite when I stumbled across the Textarea Resizer JavaScript over at mathibus.com.- Trackback made on February 9th, 2005 @ 2:37 pm
-
- Turnip’s Patch: Now with added “2005”:
[…] moved to WordPress plugins repository. Stopped the plugin working in feeds. The textarea resizer now uses the DOM (I’m predicting a gleeful comment from M […]
- Pingback made on March 3rd, 2005 @ 6:27 pm
-
- ennovy.org: Now you can write longer comments:
Now you can write longer comments
I added in some code to my comments pages that will increase/decrease the size of the textarea in the comments form. […]- Trackback made on April 22nd, 2005 @ 8:02 am
-
- Sunfox: Links for 2005-05-16:
Links for 2005-05-16
[…] Textarea Resizer JavaScript | Math Jazz (tags: javascript script programming) […]- Trackback made on May 16th, 2005 @ 7:19 am
Mathias, it’s a good thing you think of the JS-enabledness. But I don’t care ;)
Whaddya mean? Are you saying that you just assume your visitors have JS enabled? Are you? You might be right! I guess it’s a whole lotta easier to just not care. Like with IE, that is. Fuck the JS-less, CSS-less, Firefox-less bastards! In fact, it’s their problem. JavaScripts like this only add functionality to a web page…
Nah, scratch that. You can’t deny that your current solution is pretty unsemantic… :P
(Haven’t we been through this before?)
The main (not to say: the only) reason I rewrote that old script, is to make it work with
application/xhtml+xml. I didn’t really care about thatscriptelement being there…I think it’s a good idea, and I wish I could be assed to put it on my site ;). I will when I redesign.
Actually, I have an awesome DHTML idea for my redesign :D. (Although it might not work, have to wait and see…)
Mathias, I obviously am cocking around. I think I’ll use it with my redesign. Happy now? ;)
I might put on my site too, built-in to the default template of my CMS (which went into Alpha 2 today!).
Remember, be nice to Opera users too. Firefoxless
!=Good-Browserless.Very nice write-up Mathias. I’m happy to see that the “overly anal” of us actually give back to the community by making their work public. Thank you.
Jon,
I take it that’s all you’re going to tell us?
Rob,
Yup.
Dante, that’s correct, Firefoxless ≠ Good-Browserless. But anyway, you got my point, right?
Colin,
Say what? , moi?! ;) You know what? Work is public from the moment you start using it on a web site. So, I thought I could as well just make a post about it. :)
Thanks for the comments. It’s always nice to get some feedback on something you’ve been working on.
Yeah, that’s all I’m going to say. I always seem to end up giving away my great ideas and it’s well… annoying.
Great man. Must upgrade.
By the way, you do too much to please Rob ;)
enlarge.setAttribute('onclick', 'document.getElementById('comment').rows += 5;');doesn’t look all that good.How about this instead:
enlarge.onclick = function () { document.getElementById("comment").rows += 5; }?I generally shy away from executing any string as JavaScript code. I could be splitting hairs, but hey, that’s what I’m best at. ;)
P.S.: A preview would be neat for those of us who are
consumed with trying to look coolplagued with a need to keep editing their comments. :DThanks for that, Aankhen. I kinda felt dirty when I wrote that line, but hey — it’s fixed now! Remember, there’s no when it comes to designing with web standards.
Oh, and this site used to have a comment preview a couple of designs ago. I might look into writing something that’s
application/xhtml+xmlcompatible… Any help is of course greatly appreciated :)Hrm, not quite sure I follow. What would break under
application/xhtml+xml? I’m not a big fan of live previews, a la Mike Davidson, to be honest; a simple “Preview” button which either takes me to a new preview page or (preferably) usesXmlHttpRequestto get the result would be just great.If you do mean a live preview, you might look into the DOMParser (sorry, don’t have a link as I’m not sure whether it’s in a specification) or
importNode()from Mark Wubben.That would be
document.write().*Drools* An
XmlHttpRequest-wise comment preview would be so very cool! However, if I ever decide to go for a PHP preview thing, I shall never force my visitors to preview their comment first (by using both a “Preview” and a “Submit” button).Hi! I’m trying to get this thing to work on my blog, but I just can’t make it work. I’ve no experience either JavaScript or much other webdesign stuff, so I might have done much wrong. And that’s why I’m asking you for help! One place where I want it to work is here and you can find the
.jsfile here. The text “kommentar:” has the labelcomment. Would you please help me figure out what I’m doing wrong? Thank you very much!Hello Børge. As stated above, you have to include the
createElement()function for the textarea resizer to work.Thank you so much! I forgot about that. It works perfectly now.
Hi again… Just one more question: I can see that on your site, when I click “Decrease textarea” the rest of the page follows. But on my site that only happens when I enlarge it. The text underneath the textarea (and then also the rest of the site) just stays down there when I decrease it again. Do you know/could you tell me how to fix that? Thanks!
There’s something seriously wrong with your CSS… Look into it, try avoiding
position: absolute;as much as possible.The resizer doesn’t seem to work in Safari… I wrote a more generic version, which should work in any browser. It’s available here.
Sincerely,
Frodo Larik
Yeah, hobbit, my script indeed does not work in Safari, nor does it in IE… However, I must say that I’m not a big fan of
<input type="button" onclick="replace_textarea('+');" value="+" />, aka executing a string as JavaScript code either.Thanks for this! :D