Character countdown for the shoutbox.

[WillyP]

Someone on my forum requested a character countdown be added to the shoutbox. I'm not sure that's a needed feature, but thought I'd ask anyway. Is this a possibility?

[ZarPrime]

WillyP, I'm not sure what you mean by that.  Do you mean that this person wants to somehow limit the number of characters for shouts in the shoutbox and that they want some sort of visual indicator to let people know how many characters are left?  If that's what they want, I'm not sure why.  The shoutbox isn't Twitter or something that limits the number of characters in a shout.  Could you find out what they want as I am kind of confused?

ZarPrime

[WillyP]

The shout box already does limit the number of characters, actually, IIRC that is a setting.

What he asked for is a counter, that would countdown so you know how many characters are left. You see this a lot on contact forms, service request tickets, etc...

So lets say the limit is 100 characters, and you've typed 20, the counter would show 80 remaining.

[WillyP]

Ok, there does not seem to be a setting for it, I've looked everywhere and can't find it. But it's definitely limited. Like around 250 or so.

[ZarPrime]

Well, it may be limited but, if it is, it would be hard coded, in the code of course.  I've never heard of someone making this request.  I'll see if I can take a look in the code tonight or tomorrow if I get a chance.  Right now, I am in the middle of a Federal Disaster area here in Kanawha County.  What a week this has been.

ZP

[WillyP]

No hurry, like I said I don't think it's something that is 'needed'.

[ZarPrime]

Well, it's possible this could be done.  I found one piece of code that might work with it but it would have to be added into the Shoutbox code. --> http://www.smartwebby.com/DHTML/textbox_characters_counter.asp

I'll look at this tomorrow but I'm sure it's not something we would want to add into the code permanently unless more than a few people requested something like that.

ZP

[WillyP]

Awesome that worked and very easy to install... thanks!

[WillyP]

Quicky tutorial for anyone else who wants to add this: Go to ZarPrimes link and copy the contents of the first codebox into the head of every theme you are using. From the second box, copy just

Code: [Select]

onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" into the textarea in tpshout.template.php. then add a back-slash in front of the single quotes around myCounter.

Then, the important part of the remaining code is

Code: [Select]

<SPAN id=myCounter>255</SPAN> which needs to be added to the html. And you can add the text explaining what the number is, if you want, though I think most people would get it even if you just put the number there. The relevant section of my TPshout.template.php ended up looking like this:

Code: [Select]

if(($context['TPortal']['guest_shout']) || (!$context['TPortal']['guest_shout'] && !$context['user']['is_guest']))
{
echo '
<textarea onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,\'myCounter\')" class="editor" name="'. $context['tp_shout_post_box_name']. '" id="'. $context['tp_shout_post_box_name']. '" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" style="width: 80%;margin-top: 1ex; height: 50px;"  tabindex="', $context['tabindex']++, '"></textarea><br />';
if(!empty($context['TPortal']['show_shoutbox_smile']))
shout_smiley_code();
if(!empty($context['TPortal']['show_shoutbox_icons']))
shout_bcc_code();
if(!empty($context['TPortal']['show_shoutbox_smile']))
print_shout_smileys();
echo '<br /><B><SPAN id=myCounter>255</SPAN></B> characters remaining<br />
<input style="margin-top: 4px;" class="smalltext" type="submit" name="shout_send" value="'.$txt['shout!'].'" tabindex="', $context['tabindex']++, '" />';
}
if($context['user']['is_guest'] && $context['TPortal']['guest_shout'])
echo '<br /><input style="margin-top: 4px;" size="20" class="smalltext" type="text" name="tp-shout-name" value="'.$txt['tp-guest'].'" />';
elseif($context['user']['is_logged'])
echo '
<input type="hidden" name="tp-shout-name" value="'.$context['user']['name'].'" />';

echo '
<br /> <a href="' , $scripturl , '?action=tpmod;shout=show50">' . $txt['tp-showlatest'] . '</a>
<input name="tp-shout-url" type="hidden" value="'. $smcFunc['htmlspecialchars']($tp_where).'" />
<input type="hidden" name="sc" value="', $context['session_id'], '" />
</form>';

[WillyP]

Did find a major bug, if you get to the last character, you can't edit or backspace your text.

[WillyP]

Replaced with a whole new script. In the head:

Code: [Select]

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
In the shout template textarea:

Code: [Select]

onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,250);"
onKeyUp="limitText(this.form.'. $context['tp_shout_post_box_name']. ',this.form.countdown,250);"
And below the textarea:

Code: [Select]

<input readonly type="text" name="countdown" size="3" value="250"> characters left<br />
This code lifted from: How to Limit the Number of Characters in a Textarea or Text Field

[IchBin]

Good work WillyP! Yeah I've often thought about these things. Useful to have, and not a big problem to implement as you noticed.