View Full Version : textarea smilie input help

Dec 22nd, 2006, 07:28 AM
Ok, here it is, I am horrible at javascript, and this may have been solved before on here but I couldn't find the answer mainly because I dont even know what to call it lol.

What I want to do is have a little popup window when you click a 'Add Smiley' link on my site and whatever image they click on, it will insert the smiley code into the main textarea at the current cursor position.

Ive already got a working submit script (PHP) and smiley page (HTML). The smiley page currently just shows the images along with the code, and they either have to copy/paste the code or manually type it in. I would like to make things easier by enabling a click and be done method.

this is in profile.php

<textarea name='message' rows='5' cols='55'></textarea>


<title>Smilies for Broken Saintz comments</title>
<link rel="shortcut icon" href="http://brokensaintz.com/favicon.ico">
Just copy and paste one of the following codes into your shout/comment box and it will show the corresponding smilie.
<li><font color="red"><b>::bucktooth::</b></font> = <img src='images/bucktoothhappy.gif'>
<li><font color="red"><b>::cooky::</b></font> = <img src='images/cooky.gif'>
<li><font color="red"><b>::coolshades::</b></font> = <img src='images/coolshades.gif'>
<li><font color="red"><b>::creepy::</b></font> = <img src='images/creepy.gif'>
<li><font color="red"><b>::duh::</b></font> = <img src='images/duhhhhhh.gif'>
<li><font color="red"><b>::evilgrin::</b></font> = <img src='images/evilgrin.gif'>
<li><font color="red"><b>::evilhappy::</b></font> = <img src='images/evilhappy.gif'>
<li><font color="red"><b>::excitedgrin::</b></font> = <img src='images/excitedgrin.gif'>
<li><font color="red"><b>::eyeonu::</b></font> = <img src='images/eyeonu.gif'>
<li><font color="red"><b>::forcedsilence::</b></font> = <img src='images/forcedsilence.gif'>
<li><font color="red"><b>::freakout::</b></font> = <img src='images/freakout.gif'>
<li><font color="red"><b>::grumpy::</b></font> = <img src='images/grumpy.gif'>
<li><font color="red"><b>::halfsmile::</b></font> = <img src='images/halfsmile.gif'>
<li><font color="red"><b>::happy::</b></font> = <img src='images/happy.gif'>
<li><font color="red"><b>::joy::</b></font> = <img src='images/happyeyesclosedmouthopen.gif'>
<li><font color="red"><b>::toothy::</b></font> = <img src='images/happymissingtooth.gif'>
<li><font color="red"><b>::happyhappy::</b></font> = <img src='images/happynormal.gif'>
<li><font color="red"><b>::happytongue::</b></font> = <img src='images/happytounge.gif'>
<li><font color="red"><b>::huh::</b></font> = <img src='images/huh.gif'>
<li><font color="red"><b>::lmao::</b></font> = <img src='images/lmao.gif'>
<li><font color="red"><b>::meltdown::</b></font> = <img src='images/meltdown.gif'>
<li><font color="red"><b>::mischevious::</b></font> = <img src='images/mischievousgrin.gif'>
<li><font color="red"><b>::nannynanny::</b></font> = <img src='images/nannynannybooboo.gif'>
<li><font color="red"><b>::ooo::</b></font> = <img src='images/oooooo.gif'>
<li><font color="red"><b>::outraged::</b></font> = <img src='images/outraged.gif'>
<li><font color="red"><b>::puppyeyes::</b></font> = <img src='images/puppydogeyes.gif'>
<li><font color="red"><b>::puppyeyessad::</b></font> = <img src='images/puppydogeyessad.gif'>
<li><font color="red"><b>::raspberry::</b></font> = <img src='images/rasberry.gif'>
<li><font color="red"><b>::reallysad::</b></font> = <img src='images/reallysad.gif'>
<li><font color="red"><b>::sad::</b></font> = <img src='images/sad.gif'>
<li><font color="red"><b>::scared::</b></font> = <img src='images/scared.gif'>
<li><font color="red"><b>::sick::</b></font> = <img src='images/sick.gif'>
<li><font color="red"><b>::silent::</b></font> = <img src='images/silent.gif'>
<li><font color="red"><b>::skeptical::</b></font> = <img src='images/skeptical.gif'>
<li><font color="red"><b>::smirk::</b></font> = <img src='images/smirk.gif'>
<li><font color="red"><b>::spazzing::</b></font> = <img src='images/spazzing.gif'>
<li><font color="red"><b>::superbeast::</b></font> = <img src='images/superbeast.gif'>
<li><font color="red"><b>::tears::</b></font> = <img src='images/tears.gif'>
<li><font color="red"><b>::thumbsup::</b></font> = <img src='images/thumbsup.gif'>
<li><font color="red"><b>::timid::</b></font> = <img src='images/timid.gif'>
<li><font color="red"><b>::tired::</b></font> = <img src='images/tired.gif'>
<li><font color="red"><b>::whacko::</b></font> = <img src='images/wacko.gif'>
<li><font color="red"><b>::wink::</b></font> = <img src='images/wink.gif'>

the form itself doesnt have a name but if it needs one for the JS thing it can easily be done. I would really appreciate anyones help on this. Thanks in advance!!!


Dec 22nd, 2006, 10:32 AM
There are a few ways to do this. Try this one for starters:

<span onclick="document.form.message.innerHTML += '<img src="images/bucktoothhappy.gif">'
<font color="red"><b>::bucktooth::</b></font> = <img src='images/bucktoothhappy.gif'>
.....Several notes:
1. If this doesn't work, then replace the phrase "innerHTML" above with "value".
2. document.form.message assumes the containing form is named "form". Or, you could just give the textarea an ID of "thisIsItsId" and replace the above with onclick="document.getElementById.('thisIsItsId").innerHTML += ... (or with value, whichever works)
3. I'm assuming that <font color="red"><b>::bucktooth::</b></font> is a description of the smiley, and <img src='images/bucktoothhappy.gif'> is the actual image for it?
4. For proper aligning, you may need to play with what you add to the innerHTML or value above as in <img align="abscenter" src="images/bucktoothhappy.gif"> or something similar.

Let me know if this works for you.

Dec 22nd, 2006, 08:42 PM
thanks for the help, i currently have to head to work so ive got no time to try any of this yet, but when im home tonight i will definitely give all of this a shot. I'm not sure if it matter but the smilies are in a different window then the actual form itself. And yes, the font color=red is just for actual html formatting. the code i want to be inserted into the form is the ::bucktooth:: part, as i already have a php script that replaces all the bbcode to the actual html formatting.

the form's name is 'comment_user'
the textarea's name is 'message'

also, i noticed phpbb has the script im looking for in their post page, but i messed around with it last night and couldnt get it to work. But it has a section of the script in it that I also want to use, and that is the insert at current cursor position in the form.

When im done testing tonight i will let you know how things go. Thanks again.


Dec 22nd, 2006, 11:48 PM
Yeah, I don't know offhand how to add text where the cursor is, but if anything it will just be a small modification of this code. If your php script replaces bbcode, then all you really need to put in the onclick handler is

onclick="otherWindowName.document.comment_user.message.innerHTML += '::bucktooth::'"
or whatever it is that your php code replaces with an image (I'm assuming the text "::bucktooth::" is it.
You have to add the name of the other window where I did. Take a look at the other php code you said you located, though. It may work better than this one.

Dec 23rd, 2006, 08:29 AM
ok, i got the coding from phpBB to work, EXCEPT i need it to work in two different windows, below is the code i am using, please, if anyone can help me achieve this goal, it would help a lot.

JavaScript in header.

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

* Insert emoticon
function smiley(text)
text = ' ' + text + ' ';

if (document.comment_user.message.createTextRange && document.comment_user.message.caretPos)
var caretPos = document.comment_user.message.caretPos;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
var selStart = document.comment_user.message.selectionStart;
var selEnd = document.comment_user.message.selectionEnd;

mozWrap(document.comment_user.message, text, '')
document.comment_user.message.selectionStart = selStart + text.length;
document.comment_user.message.selectionEnd = selEnd + text.length;

* Insert at Claret position. Code from
* http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl)
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();

* From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
var scrollTop = txtarea.scrollTop;

if (selEnd == 1 || selEnd == 2)
selEnd = selLength;

var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);

txtarea.value = s1 + open + s2 + close + s3;
txtarea.selectionStart = selEnd + open.length + close.length;
txtarea.selectionEnd = txtarea.selectionStart;
txtarea.scrollTop = scrollTop;


JavaScript In Link

<a href=\"javascript:smiley(':D')\"><img src='images/bucktoothhappy.gif' onclick=\"smiley(':D');return false\"></a>

the link code will need to reside in smilies_popup.html
the form is in profile.php

i'm not sure if the main header JS needs to be in the smilies_popup.html or in the profile.php where the actual form is.

the way i tested it was by sticking the js link and the main js both in the profile.php and it worked successfully.

Jan 1st, 2007, 06:40 AM
::bump:: anyone?