sigcounter

Live Signature Character Counter

On 03.06.11, In phpBB3 Tutorials, by

Use this script to display a real-time indication of your signature limit, and how many characters you have remaining. You will be prevented from entering any more characters once you reach 0. Prosilver and Prosilver-based styles only.

maxlength.js (1.56kb)

What we’re trying to achieve

As a regular forum user, what really annoys me is breaking the signature character limit…but not being told about until after I’ve spent 5 minutes formatting everything. This script will add a live character counter above the signature text box keeping the user informed of exactly how many characters they have left. Once the user reaches the maximum amount of characters, they won’t be able to enter any more into the text box. Thanks go to Remy Sharp for the jQuery functionality.

Preparation

To complete this tutorial, you’ll need a decent source code editor. You also need to download jquery.maxlength.js by clicking the download button above and extracting the zip file. Then perform the following file copy instructions:

  • Copy: siglimit/jquery.maxlength.js to /phpBB/styles/prosilver/template/

The HTML Edits

First of all we need to add the message telling users how many characters they have left. We’ll then add a custom class to the textarea so the jQuery can reference it, and finally we’ll add some inline jQuery to power our counter. But firstly, we need to connect to jQuery and our max length script.

Open: /styles/prosilver/template/overall_header.html

Find:

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Below, Add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.maxlength.js"></script>

Open: /styles/prosilver/template/posting_editor.html

Find:

<!-- INCLUDE posting_buttons.html -->

Before, Add:

<!-- IF $SIG_EDIT eq 1 -->
<p><strong>Characters remaining:</strong> <span class="charsLeft error">{L_SIGNATURE_LIMIT}</span></p>     
<!-- ENDIF -->

Find:

    <div id="message-box">
        <textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>

    </div>

Replace with:

<div id="message-box">
        <textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox<!-- IF $SIG_EDIT eq 1 --> limited<!-- ENDIF -->">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
        <!-- IF $SIG_EDIT eq 1 --><input type="hidden" name="maxlength" value="{L_SIGNATURE_LIMIT}" /><!-- ENDIF -->
    </div>

Find:

<!-- IF $EXTRA_POSTING_OPTIONS eq 1 -->

Before, Add:

<!-- IF $SIG_EDIT eq 1 -->
        <script type="text/javascript">
            $('textarea.limited').maxlength({
            'feedback' : '.charsLeft',
            'useInput' : true
        });
        </script>
<!-- ENDIF -->

Some PHP Edits

So you’ve probably noticed I’ve used a template variable {L_SIGNATURE_LIMIT}, which don’t exist by default in phpBB. We’re going to create it here. Doing this allows the script to use the “Maximum Signature Length” value defined in the Administration Control Panel, rather than having to hard-code a character limit value into the template file.

Open: /includes/ucp/ucp_profile.php

Find:

'L_SIGNATURE_EXPLAIN'   => sprintf($user->lang['SIGNATURE_EXPLAIN'], $config['max_sig_chars']),

Below, Add:

'L_SIGNATURE_LIMIT'     => $config['max_sig_chars'],

And that’s about it!

Support / Donations

If you encounter any problems implementing this on your board, support is freely available here. If you’d like to leave me a donation for the time spent testing the script and writing the tutorial you can do so here. And finally if you think I’ve missed something you can let me know here. Marvellous.