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