Emoticons in a Form Field

[dedwards]

I need to get a script to graphically add emoticons into a form field. I am using an Apeboard plus, a cgi script that allows one to make one's own BBS/Guestbook, etc... IS there a script out there that can do this?

[Twey]

Do you mean you just need pictures that can be clicked to insert text (as seen on this forum) or that you actually need to insert the resulting pictures?

[dedwards]

Well I have my own pictures that I want to be used where you click on them and they insert text like in the forum. That's what I was trying to do. i looked at the scripts of some forum sites like this but it seems i'm missing something and I don't really know what. I was wondering if there was a script out there with instructions for everyone to use or if someone knew how to. But yeah thats the basic idea.

[Twey]

See this (http://phpxperts.com/hasin/?p=139).

[dedwards]

Am I supposed to be looking at the content of the page or the page source?

[Twey]

Content of the page: it includes example code.

[dedwards]

Sorry. I'm kind of confused, this code seems to have to do with inserting text where one inserts the cursor. Am I missing something here?

[Twey]

That's the point. All you need to do is call that code onclick. For example:

<img src="smiley.png" onclick="insertSmiley(':)');" />
<script type="text/javascript">
insertSmiley = function(s) {
with(document.getElementById("myTextboxId")) {
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = s;
} else if (this.selectionStart || this.selectionStart == 0) {
var startPos = this.selectionStart,
endPos = this.selectionEnd;
this.value = this.value.substring(0, startPos) + s + this.value.substr
ing(endPos, this.value.length);
if(this.endPos != this.startPos) {
this.selectionStart = startPos;
this.selectionEnd = endPos;
} else {
this.selectionStart = startPos + s.length;
this.selectionEnd = endPos + s.length;
}
} else {
this.value += s;
}
}
}
</script>

[dedwards]

Oh. That makes sense... Here, I will try it.

[dedwards]

To specify where you want that text inserted, do change this line:
with(document.getElementById("myTextboxId")) ?
Like change myTextboxId to, i don't know, erm textarea?

See, cause its working, it is just not putting the text where I want it. I tried giving the text area an id name but its just ignoring it

[Twey]

Not a name, an ID.

<textarea id="fish"></textarea>Then use "fish" as the ID in the code.

[dedwards]

Yup, sorry yea I meant "id". I tried that, I even used "hamster":) being thats what my smilies are. Um, you would have to change that getElementbyId, right? I did that, and nothing seemed to work.

[Twey]

you would have to change that getElementbyId, right?Only its argument.
I even used "hamster" :) being thats what my smilies are.Duplicate IDs are invalid. The same ID can't be used for more than one element.

[dedwards]

Duplicate IDs are invalid. The same ID can't be used for more than one element.

I meant that my smilies are actually hamster images... but that's not the point. I did follow all that, I'm not sure where I went wrong. I'm still searching for some broken string...

[dedwards]

Well, I guess that's it then. I'm going to try something else, I have some ideas. But thank you very much for helping. :)

[Twey]

I could probably help more if you gave me a link to the page on which you've attempted to implement this.

[panachepad]

I'd like to be able to make this work for my page, but I don't know how to get started. My setup is a shoutbox program, and I've added a separate table on the page to show the smilies that are available to use in the shoutbox.

I *think* I would take that code you posted, Twey, and apply it to the table where the smilies are, after having changed the code to understand where to place the smilie code text??? I am utterly clueless. Sorry.

I hope it was not bad form to bump this old topic.