TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

June 03, 2023, 10:59:05 PM

Login with username, password and session length
Members
  • Total Members: 3,864
  • Latest: Joonoz
Stats
  • Total Posts: 194,365
  • Total Topics: 21,157
  • Online today: 113
  • Online ever: 3,540
  • (September 03, 2022, 01:38:54 AM)
Users Online
Users: 1
Guests: 26
Total: 27

Character countdown for the shoutbox.

Started by WillyP, January 11, 2014, 02:21:56 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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. :tickedoff:

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 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 <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:
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:<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: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: <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. :)