Expandable TextAreas

[ronincyberpunk]

Not necessarily the most necessary feature, but it's something I really like as it encourages people to write longer comments. There is a script out there that allows people to make expandable textareas with greasemonkey, and I'm trying to figure out how to put that into my k2 installation. I'm going to play around with it and will update you as I figure out how to best do it.

[ronincyberpunk]

[Updated version available further down]

Alright, here's how I did it. If you'd like to see it in action go check out my entry about it: http://ronincyberpunk.com/?p=1554

First, here is the Javascript I put in the header.php file:

<?php if (is_single()) { ?>
<Script Language=JavaScript>
function expand() {
e = document.getElementById('comment').style.height;
e = parseInt(e.replace("px",""));
if (isNaN(e)) {
e = 250;
}
e += 30;
document.getElementById('comment').style.height = e + "px";
}
function contract() {
e = document.getElementById('comment').style.height;
e = parseInt(e.replace("px",""));
if (isNaN(e)) {
e = 250;
}
if (e > 250) {
e -= 30;
document.getElementById('comment').style.height = e + "px";
}
}
</Script>
<?php } ?>


The javascript was the hardest part of this all because I had to figure out the isNaN test. Also note, 250 is my default comment textarea height, so you need to change that number to match whatever your default height is. And 30 is just the amount of pixels I decided to make the change by, it's completely arbitrary.

Then in the comments.php I added the following text immediately following the comment textarea:
<div align="right"><input type="button" value="+" onClick="expand()"> <input type="button" value="-" onClick="contract()"></div>


I tried to figure out how to best style the buttons, and make it as intuitive as possible so I'm still playing around with this, but this should work immediately after being plugged into your site.

Let me know if anyone has any questions!

[Heilemann]

I've been wanting to do this for a while, just never got around to it. One suggestion though: Put the +/- above the textarea; make it easier to click a couple of times.

[ronincyberpunk]

Well feel free to incorporate the idea in the next release. And yeah, I was playing around with the placement a bit earlier. I'm working on graphics instead of the fugly html buttons.

[Matt]

Very nice, thank you very much for putting this together. I got it working on the site I'm putting together, it works as advertised.

One small suggestion: Put in titles to help visitors know what they do, not everyone understand what the +/- means, especially if you make it an image-button. For +, title could be "Enlarge the comment box".

[ronincyberpunk]

Thanks for the feedback! Alright, the latest changes. I changed over to small pngs and added a small prompt text above the images to help users figure out the buttons.

I created 2 small pngs, more.png (http://ronincyberpunk.com/wp-content/themes/k2/styles/patrick/more.png)and less.png (http://ronincyberpunk.com/wp-content/themes/k2/styles/patrick/less.png) (please do not hotlink!).

To use the images, I then replaced and moved the text in comments.php to be as follows to immediately precede the comment textarea:
<div align="right">Expand/Contract Textarea<br><img src="http://ronincyberpunk.com/wp-content/themes/k2/styles/patrick/more.png" alt="More" onClick="expand()" style="cursor:pointer; border: 0;"> <img src="http://ronincyberpunk.com/wp-content/themes/k2/styles/patrick/less.png" alt="Less" onClick="contract()" style="cursor:pointer; border: 0;"></div>

You of course need to change the image locations for your own site.

[Heilemann]

I've implemented it on Binary Bonsai (http://binarybonsai.com), saves me the hassle of having to do it myself at some point :)

I made some minor modifications to make it fit with my commentbox, which can float. So when you float it, it returns the size to 250px, so the form doesn't push down under the bottom of the browser, and also it hides the resize buttons when floated.

Pretty nifty, though I wish there was a drag-n-drop kinda way to resize textareas.

[ronincyberpunk]

Yeah, the drag & drop is what I originally set out to do but I couldn't figure out how the Greasemonkey scripts could easily be integrated... maybe I'll try more later. Until then, this works nicely at least.

I made a bit of a change to my javascript, changing it to a single function which took in either a "1" or a "-1" and used that to decide whether it would increase or decrease.

[Heilemann]

By all means post the code.

[Matt]

I went with Silk's arrows:

http://foogaming.com/images/more.png
http://foogaming.com/images/less.png

If you check the site out, it's very new, try not to tell anyone about it just yet. I'm far from finished with it. :)

[ronincyberpunk]

Well I was going to work on the drag & drop which would override all of this - lol. But in any case alright if you insist:



<?php if (is_single()) { ?>
<Script Language=JavaScript>
function size(x) {
e = document.getElementById('comment').style.height;
e = parseInt(e.replace("px",""));
if (isNaN(e)) {
e = 250;
}
x = parseInt(x);
if (((x < 0) && (e > 250)) || (x > 0)) {
e += x * 30;
document.getElementById('comment').style.height = e + "px";
}
}
</Script>
<?php } ?>

And then your buttons should call it with "size('1')" and "size('-1')" for increase and decrease respectively.

[Heilemann]

By all means, keep with the drag & drop :D

[ronincyberpunk]

I am indeed. There has to be some easy way to take a userscript for greasemonkey and put it to use on your own site...

[Matt]

I had no idea you could do that with textarea. I'd be all for it if you could get it working, although I wonder how you can explain to people the comment box can be resized, or give a visual indication of it.

[ronincyberpunk]

I recall seeing one way that used a small image that sat next to the text area, and that was the handle of the drag and drop. I just have no clue where I did see it...

[Matt]

I recall seeing one way that used a small image that sat next to the text area, and that was the handle of the drag and drop. I just have no clue where I did see it...

Now that you mention it, I remember seeing that too.

[ronincyberpunk]

Apparently no one else has EVER in the HISTORY of the INTERNET tried to reverse engineer a greasemonkey script...

[Heilemann]

You're a pioneer :D

[ronincyberpunk]

Give me a f*cking coon skin cap and a mountain to climb and I'll blaze a trail, but jeezus this is the Internet, I'm not supposed to have to uninvent the wheel.

[ronincyberpunk]

Alright, major leap forward, check this link out: http://4umi.com/web/javascript/textarearesize.htm

Now to figure out how to put it use.

[ronincyberpunk]

*KERTHUD - THUD - THUD - THUD*

That would be the sound of my head hitting the desk, repeatedly. I'm a moron. Why oh why do I make things so difficult? I went diving into the deepest reaches of the internet only to just now realize where I remember seeing the resizable text area. It's the feature rich WP entry text area. I had it turned off because the html it makes sucks, but there it is - the resize tab in the lower right of the text area. Now to begin deconstructing.

[ronincyberpunk]

The following only works with Firefox 1.5, and has shown not to work on IE6 or FF 1.0.7

Well I'll be damned. Call me Louis & Clark because I stumbled across an awesome solution, a bit heavy on the code but I don't know enough to trim it down.

Go check out what sits under the text area: http://ronincyberpunk.com/?p=1554#comments

The script comes from this site: http://lojjic.net/script-library/TextAreaResizer-test.html

And so you need 2 javascript files from his site:
http://lojjic.net/script-library/TextAreaResizer.js
http://lojjic.net/script-library/ScriptSheet.js

Then in the header.php you need insert the following lines, you may need to edit the src for the scripts depending on where you put them:
<?php if (is_single()) { ?>
<script type="text/javascript" src="TextAreaResizer.js"></script>
<script type="text/javascript" src="ScriptSheet.js"></script>

<link rel="scriptsheet" type="text/javascript" href="TextAreaResizer.js#TextAreaResizer" title="default" />
<?php } ?>

In your css style you need to add the following (unless you just want to put it in the header abover):
.textarea-resizer {height:4px; background:#EEE; cursor:s-resize;}

And what about comments.php you ask? Well, I added a slight explanation line under the textarea, but otherwise this baby takes care of it for you just with mods to the header.php.

How's that for a day's work?

The scripts are taken directly from his site, neither of which hold any disclaimer to the code so I don't know their status for use.

[lisa]

Um... FYI, it's not working on my end. The only thing that appears to have changed is that there is no +/- buttons where there were before.

There is no apparent area where the dragging should occur. (I'm on Firefox 1.0.7)

[ronincyberpunk]

Thanks for the heads up, I'm investigating. So far I've confirmed it works on Firefox 1.5. Apparently it doesn't work on IE 6 either. Am investigating.

[david]

The quick reply box of vbulletin has such feature, which works fine with FF and IE7b, which are the only two browsers I have to test with.

[ronincyberpunk]

Yeah, I'm working on it. Now that I begin looking more I'm seeing it in more applications and stuff. But tonight I'm burned out on it.

[Heilemann]

Safari's a bit daft when it comes to 'advanced' stuff like this; which is to say: It doesn't work on Safari (probably can't).

[JohnW.]

I hope you don't mind if I take a quick stab at the drag and drop solution. The javascript is based off of the code in this knowledge base article with a few small changes. It works in Firefox 1.5, IE6 , and Opera 9.
http://www.faqts.com/knowledge_base/view.phtml/aid/23155

Download the js and place it in the k2/js folder.
http://jjwester.resnet.mtu.edu/blog/wp-content/themes/k2clean/js/resizey.js

Put this in header.php.
<?php if (is_single()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/resizey.js"/></script>
<?php } ?>

Then add this to comments.php right below the textarea.
<hr id="drag" />

And finally style it with css.
#drag {
cursor:s-resize;
display: block;
background: #ededed;
height: 5px;
border: none;
}

[ronincyberpunk]

Not at all, I'm out of my league and just seeing what I can come up with. John's solution works in IE6 and FF1.5

Thanks for putting me out of my misery! :)

[Matt]

Nice, JohnW. Easy peezy, works like a charm. :)

Just need to figure out a way to indicate to visitors the feature is there and what it does.

[Matt]

Thanks for putting me out of my misery! :)

Said like a true ronin. :D

[ronincyberpunk]

Well if we didn't have an all working solution come up, I'd end up wasting my day working on it instead of - you know - paying the bills with my real job. Last night I was rather... grumpy, due to the frustration which rose from bashing my head against the wall a few times.

[lisa]

Ouch, I'm always against head bashing. Now, flinging things around the room when pissed of... Thats great. Bonus points when you break something, and your focus is moved from what you couldn't figure out, to how to fix what you broke (which, really could still be the same thing you were pissed about to begin with ;))

[Matt]

Ouch, I'm always against head bashing. Now, flinging things around the room when pissed of... Thats great. Bonus points when you break something, and your focus is moved from what you couldn't figure out, to how to fix what you broke (which, really could still be the same thing you were pissed about to begin with ;))

Personally I stab a pillow repeatedly until feathers start floating all over, and giggle maniacally, but to each his own. :D

[QuietCitizen]

I followed JohnW.'s instructions and placed the drag thing here from guessing:

<?php if (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } ?>
<hr id="drag" />
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<br class="clear" />
</p>

I hope that's good. But anyway--the 'drag bar' shows, but does nothing for some reason. I'll be leaving the customization up (already have another question out in the forums) so you can go to the comments and see. Any ideas about fouls?

Downloaded javascript, put in js folder, put call to js file in header, css in my theme's stylesheet, inserted drag code, and that's what I get.

Thanks.

[Matt]

I followed JohnW.'s instructions and placed the drag thing here from guessing:

<?php if (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } ?>
<hr id="drag" />
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<br class="clear" />
</p>

I hope that's good. But anyway--the 'drag bar' shows, but does nothing for some reason. I'll be leaving the customization up (already have another question out in the forums) so you can go to the comments and see. Any ideas about fouls?

Downloaded javascript, put in js folder, put call to js file in header, css in my theme's stylesheet, inserted drag code, and that's what I get.

Thanks.

Try moving the javascript bit to a different position within the head tags. I had a problem where it didn't work at first, but then I moved it above another javascript, and it worked after that.

[QuietCitizen]

Hey, thanks a lot! It took a good amount of fiddling around, but I finally moved it after all the JS, right above <?php wp_get_archives('type=monthly&format=link'); ?> and it worked. I decided to try the same thing with the javascript call for the dropdown entry titles, and it fixed that whole problem, too.

[Matt]

Don't ask me why it does that, I'm just glad it's not a problem anymore. :)