Users Tuesday Tips : Add a counter to the quick reply, extended reply, PM's & the signature. By Darren

First topic message reminder :

Notice: This tutorial can only be preformed by Founders, whilst in the Founding account. After Saving these edits, when an update is released, you will be required to manually add the new template codes in yourself (Otherwise you will have to delete the customizations and re-add them)

This tutorial will provide you the ability to add the counter to the quick reply, extended reply, PM's & the signature.
The counter can only read the non-WYSIWYG Mode.

Forum Version: PunBB

Adding a count in the signature

1) Head to Display > Templates > Profile > Profile_Edit_Signature.
Locate this code: {SIGNATURE_EDIT}
In the line ABOVE it, insert this script.

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 1000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(1000- tet.length);
});
});</script>

Save & publish the template.
Now you may view your new counter in the signature.


2) Adding a count in the extended reply box.
Templates / Post & Private message.
Locate the code: , which should be 3 lines above: {L_MESSAGE}
and insert this code, in the line ABOVE the first code.

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Now save & Publish it.
Now you can see your Counter in the extended reply editor
3) Now head to the template called "Posting_body_wysiwyg"
Locate this code: <tr valign="top">
Insert our script in the line ABOVE it

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Now save & publish

Note: After that last modification, the counter is now in the private messages.
There's no additional mods necessary there
4) In the Quick Reply Box.
Templates / General / Viewtopic_body.
Locate this code: {QUICK_REPLY_FORM}
and in the line ABOVE it, insert this code:

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Now, save & publish it.
You can now see it in the Quick reply

Now, that is the end of all the modifications for the character counter in PunBB.

Sit back, and check 'em out

---

Forum Version: PHPBB2
Have I said that PHPBB2 templates are really annoying yet?

1) In the signature
General > Template / Profile > Profile_edit_signature.
Locate the line: {SIGNATURE_EDIT}
and in the line ABOVE it, add this script

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 1000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(1000- tet.length);
});
});</script>

Save & publish the template.

2) Extended reply box

Templates > Post & Private messages > Posting Body
Locate the code: <!-- BEGIN switch_quote_limit -->
In the line ABOVE it, add the script:

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Save & publish.

3) Now were in the same room, but the template posting_body_wysiwyg .
Locate the code: <!-- BEGIN switch_quote_limit -->
and in the line ABOVE it, add the script:

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Now, save & publish.

In PHPBB2 we need to add a script for the private messages, we will do that now.

4) Same room again, but template privmsg_preview
Locate the line: <td class="row1" colspan="2" valign="top"><div class="postbody">{MESSAGE}</div></td>

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Save & publish.



5) In the Quick Reply Box.
Templates / General / Viewtopic_body.
Locate this code: {QUICK_REPLY_FORM}
and in the line ABOVE it, insert this code:

Code:

<script>jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('Characters Used: - of 65,000; Number of characters left: -;').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#sig_count').html(tet.length);
jQuery('#sig_recoursive').html(65000- tet.length);
});
});</script>

Now, save & publish it.
You can now see it in the Quick reply


I hope you now enjoy your new tool, and remember, if you have any problems, feel free to use the Support Section!


Thanks,
Darren.

I believe you have understood fine
Could you type something more there please?
Are you using my updated codes?

Darren1 wrote: I believe you have understood fine
Could you type something more there please?
Are you using my updated codes?

I will try a new post.....



The only thing that happen was the cursor move more to the right each time I press the space bar. See image above....

I am using the updated codes.

Thanks,
bigugly11

this is what i meant darren(i use the updated codes) and still it dont count.

i guess i will post a pic too when im not bored ._.

I really had no intention of posting here again, but this is ridiculous.

Darren, had you told me what your plans were for this script when you asked me about it two months ago, I would have gladly provided the four lines of code that would let the script work on all four board types. And in addition, installation would simply be adding it to the announcement block as opposed to messing around with several templates.

And here's the script you posted two months ago in a PM to me on Facebook Forum. Note the difference to what is in the first post. Those differences are why the script below will work, and the scripts in the first post will not...

Code:

<script>
jQuery(document).ready(function() {
jQuery('#text_editor_textarea').before('<p>Characters Used: <span id="post_count">-</span> of 65,000; Number of characters left: <span id="post_recoursive">-</span>;</p>').keyup(function() {
tet = jQuery('#text_editor_textarea').val();
jQuery('#post_count').html(tet.length);
jQuery('#post_recoursive').html(65000- tet.length);
});
});
</script>

lol what dion posted is right the counters works fine now.....


thank you

Garland wrote:lol what dion posted is right the counters works fine now.....


thank you

To get it to work correctly..I had to use dion's content in place of Darren's content and use Darren's tutorial as a guide to put it in each template as stated in Darren's tutorial....maybe this is because I do not know what dion meant by the statement "adding it to the announcement block".

Oh, I replace the 65,000 with 1000 in the...General > Template / Profile > Profile_edit_signature and it works properly.

My thanks to Darren & dion,
bigugly11

Dion's code is darren's first version of the code. What he meant by 'the announcement block' is the scrolling announcements.

Saxaca wrote: What he meant by 'the announcement block' is the scrolling announcements.

Thanks for that information.

That was my first thought..but disregarded the thought because it made no sense to me because I would not want a scrolling announcements like that.

Oh well, each to his own.

Thanks
bigugly11

Not working.

rhe wrote:Not working.

To get it to work correctly..I had to use dion's content in place of Darren's content and use Darren's tutorial as a guide to put it in each template as stated in Darren's tutorial.

Oh, I replace the 65,000 with 1000 in the...General > Template / Profile > Profile_edit_signature and it works properly.

The end result can be seen and tested...@.... http://easttnforum.forumotion.com/post?f=2&mode=newtopic

My thanks to Darren & dion,
bigugly11