Simple Machines Community Forum

I have some code here that sits in profile_template.php allowing the user to say a little bit more about themselves. Currently it will truncate the information if they type too many characters without telling the user. I'd like to add some javascript to display a character count under this box just like the signature does. Do I need to copy all of the code under this or can I simply call the same code and use a different name for the textbox?

Where do I set the character limit?? I want it to be greater than 300. This should be a rather flexible field.

echo '
<tr>
<td width="40%" valign="top">
<b>About Yourself:</b>
<div class="smalltext"></div><br />
<br />
</td>
<td>


<textarea class="editor" name="default_options[text_about]" rows="5" cols="50">', isset(
$context['member']['options']['text_about']) ?
$context['member']['options']['text_about'] : '', '</textarea><br />

</td>
</tr>';

First, use:

<textarea class="editor" name="default_options[text_about]" rows="5" cols="50" onkeyup="calcCharLeft2();" id="text_about">

And add under it, somewhere:
<span class="smalltext">Maximum characters: 300, remaining: <span id="signatureLeft">300</span></span>

Then add this:
<script language="JavaScript" type="text/javascript"><!--
function tick2()
{
if (typeof(document.creator) != "undefined")
calcCharLeft2();
setTimeout("tick2()", 1000);
}

function calcCharLeft2()
{
var maxLength = 300;
var oldString = "", currentString = document.creator.text_about.value;

if (!document.getElementById("aboutLeft"))
return;

if (oldSignature != currentSignature)
{
oldSignature = currentSignature;

if (currentString.replace(/\r/, "").length > maxLength)
document.creator.text_about.value = currentString.replace(/\r/, "").substring(0, maxLength);
currentString = document.creator.text_about.value.replace(/\r/, "");
}

setInnerHTML(document.getElementById("aboutLeft"), maxLength - currentSignature.length);
}

setTimeout("tick2()", 1000);
// --></script>

(replace the 300, which happens twice or so, with whatever number you want.)

-[Unknown]

echo '
<tr>
<td width="40%" valign="top">
<b>About Yourself:</b>
<div class="smalltext"></div><br />
<br />
</td>
<td>
<textarea class="editor" name="default_options[text_about]" rows="5" cols="50" onkeyup="calcCharLeft2();" id="text_about">', isset(
$context['member']['options']['text_about']) ?
$context['member']['options']['text_about'] : '', '</textarea><br />
<span class="smalltext">Maximum characters: 300, remaining: <span id="signatureLeft">300</span></span>
</td>
</tr>

<script language="JavaScript" type="text/javascript"><!--
function tick2()
{
if (typeof(document.creator) != "undefined")
calcCharLeft2();
setTimeout("tick2()", 1000);
}

function calcCharLeft2()
{
var maxLength = 300;
var oldString = "", currentString = document.creator.text_about.value;

if (!document.getElementById("aboutLeft"))
return;

if (oldSignature != currentSignature)
{
oldSignature = currentSignature;

if (currentString.replace(/\r/, "").length > maxLength)
document.creator.text_about.value = currentString.replace(/\r/, "").substring(0, maxLength);
currentString = document.creator.text_about.value.replace(/\r/, "");
}

setInnerHTML(document.getElementById("aboutLeft"), maxLength - currentSignature.length);
}
setTimeout("tick2()", 1000);
// --></script>';


Hmmm, almost. I have that setup but there is a constant of 300 being displayed instead of a variable. I'm just not sure which variable to display? calcCharLeft2() ? How would I use it in there string?

Sorry.  In that snippet find:

signatureLeft

And replace with:

aboutLeft

-[Unknown]

Odd. Still not working. What is this part about oldsignature != currentsignature? Could that be screwing things up?

echo '
<tr>
<td width="40%" valign="top">
<b>About Yourself:</b>
<div class="smalltext"></div><br />
<br />
</td>
<td>
<textarea class="editor" name="default_options[text_about]" rows="5" cols="50" onkeyup="calcCharLeft2();" id="text_about">', isset(
$context['member']['options']['text_about']) ?
$context['member']['options']['text_about'] : '', '</textarea><br />
<span class="smalltext">Maximum characters: 300, remaining: <span id="aboutLeft">300</span></span>
</td>
</tr>

<script language="JavaScript" type="text/javascript"><!--
function tick2()
{
if (typeof(document.creator) != "undefined")
calcCharLeft2();
setTimeout("tick2()", 1000);
}

function calcCharLeft2()
{
var maxLength = 300;
var oldString = "", currentString = document.creator.text_about.value;

if (!document.getElementById("aboutLeft"))
return;

if (oldString != currentString)
{
oldString = currentString;

if (currentString.replace(/\r/, "").length > maxLength)
document.creator.text_about.value = currentString.replace(/\r/, "").substring(0, maxLength);
currentString = document.creator.text_about.value.replace(/\r/, "");
}

setInnerHTML(document.getElementById("aboutLeft"), maxLength - currentString.length);
}
setTimeout("tick2()", 1000);
// --></script>';


Sorry, try this one.

-[Unknown]

Worked like a charm. I see you just changed the oldsignature != currentsignature to oldstring != currentstring. Thank you very much.  :)