PDA

Click to See Complete Forum and Search --> : Add smilies to textareas

ReMBReT
12-18-2003, 06:28 PM
I'm a newbie in javascript, so this justify my post.

I'm trying to make my this script working, it's supposed to do the same as in this forum, clicking on a smilie, then translating it into text in a textarea.

<script language="JavaScript" type="text/javascript">

function AddText(defaultText,loc){
if (document.adminwork.loc.createTextRange){
var text;
document.adminwork.loc.focus(document.adminwork.loc.caretPos);
document.adminwork.loc.caretPos = document.selection.createRange().duplicate();
if(document.adminwork.loc.caretPos.text.length>0){
document.adminwork.loc.caretPos.text = document.adminwork.loc.caretPos.text;
}
else{
document.adminwork.loc.caretPos.text = defaultText;
}
}
else {document.adminwork.loc.value += defaultText;}
}
</script>

So that's the function, in the <head> of my page.
Now, that's my image, in PHP.


<?
$loc = 'newsmessage';
echo '<img src="smilies/alone.gif" style="cursor:hand" onclick="javascript:AddText(\'[smi01]\',\''.$loc.'\');" align="absmiddle">';
?>


My form is named 'adminwork' and the textarea is named 'newsmessage'.
So what I want this to do is when we click on alone.gif, it writes smi[01] into the textarea 'newsmessage' in the form 'adminwork'. What's not working!?!?!!

Thanks a lot
:D
Pittimann
12-19-2003, 12:41 AM
Hi!

Your js is okay (but you should know, that it only works for IE).

There's a little mistake in your PHP:

<?
$loc = 'newsmessage';
echo "<img src=\"smilies/alone.gif\" style=\"cursor:hand\" onclick=\"java script:AddText('[smi01]','".$loc."');\" align=\"absmiddle\">";
?>

Please note 1): the space between "java" and "script" has to be removed,
Please note 2): the combination of your PHP (even if corrected like above) and the js will not work! Instead of defining $loc and using it to have 'newmessage' parsed for the js function call, you should just make it:

<?
echo "<img src=\"smilies/alone.gif\" style=\"cursor:hand\" onclick=\"java script:AddText('[smi01]','newsmessage');\" align=\"absmiddle\">";
?>

and replace all "loc"'s in your js with "newsmessage"...
Cheers - Pit
ReMBReT
12-19-2003, 01:34 PM
It's really kind of you to answer me.
I knew that PHP was useless after the page loads and I used it with javascript, stupid me.

Anyway, since I have at least 6 text area in my form that I want smilies that can be added, and almost 30 smilies, I don't want to write all of this for EACH textarea.

I'd like to do that when we click on the image, it writes the text in the textarea currently focused on. It is possible?

Thanks in advance.
Pittimann
12-20-2003, 03:20 AM
Hi!

That's absolutely possible. You can declare a variable (let's call it whoHasFocus) and all your textareas will have an onfocus event assigning a specific value to that variable (you could use the textarea's id).

Your function AddText() could then use the value of whoHasFocus to write to the textarea which had received focus last.

In order to avoid problems you could say 'whoHasFocus="";', whenever an element other than the textareas is focussed. If your function find's whoHasFocus's value=="", an alert could pop up telling the user to place the cursor in one of the textareas before clicking the smilie to be inserted...

Cheers - Pit
ReMBReT
12-22-2003, 04:25 PM
I think I understand what you mean, but when I tried it, I got errors.

Here is my new function :
function addtext(defaultText){
alert(itemfocus);
if (document.adminwork.itemfocus.createTextRange){
var text;
document.adminwork.itemfocus.focus(document.adminwork.itemfocus.caretPos);
document.adminwork.itemfocus.caretPos = document.selection.createRange().duplicate();
if(document.adminwork.itemfocus.caretPos.text.length>0){
document.adminwork.itemfocus.caretPos.text = document.adminwork.itemfocus.caretPos.text;
}
else{
document.adminwork.itemfocus.caretPos.text = defaultText;
}
}
else document.adminwork.itemfocus.value += defaultText;
}

Then, there is example of my text fields :
<textarea rows=10 cols=80 name=newsmessage maxlenght="1000" onfocus="javascript:itemfocus=this.name">
<input type=text name=newstitle maxlenght="50" size="81" onfocus="javascript:itemfocus=this.name">

I'm not sure at all about this one. Help Pittimann :o!

Thanks :D!
Pittimann
12-22-2003, 05:16 PM
Hi!

Have to hit my pillow soon :(
Do you have the intention to have the smilies above/ aside each of the textareas or only once for all of them? Could you please post that info?

Cheers - Pit
ReMBReT
12-22-2003, 09:54 PM
I'd like to make just two or three bunches of clickable smilies for all the textareas, like one at the top of the page, one at the middle, then bottom, so the user doesn't have to scroll up and down every time and doesn't get annoyed by multiples smilies everywhere.

If it is not doable, then I'd like to make just one smilies pack.