Can anyone help me with my clickable smilie buttons

liam1412 · January 13, 2007

Im trying to create the clickable smilie and bb buttons that input the smily wherever the cursor is in the text box. I have been given this code and it just takes me to the IE cannot find this page.

Please can someone tell me what im doing wrong. Its trying to link to a page on my local host named

[code]document.selection.createRange().text='::smilie::'[/code]

But obviously that isn't there as the text box is on the same page.

[code]
<td width="30" bgcolor="#565656"><a href="document.selection.createRange().text='::smilie::'"><img src="images/smilies/cool.gif"></a></td>
[/code]

??? ??? ???

Thanks

ShogunWarrior · January 13, 2007

Your href would have to [b]href="javascript: document.selection.createRange().text='::smilie::'"[/b] as far as I know.

liam1412 · January 13, 2007

Thanks for your reply.

This is now printing what I want - IE on click is printing ::smilie:: but just on a new page not in the text area.

Any other clues.

franklyn · January 13, 2007

not sure if you've solved the problem yet
try something like this
[code]
<html>
<head>
<script type="text/javascript">
function AddEmo(tag)
{
var emo=document.forms["THE id OF YOUR FORM"].elements["THE ID OF YOUR TEXT AREA"];
emo.value+="::"
emo.value+=tag
emo.value+="::"
}
</script>
</head>
<body>
<img src="http://franklyn.ifastnet.com/News/emoticons/wink.png" onClick="AddEmo('wink')">
</body>
</html>
[/code]
if you would like to use the same button on other form elements just pass the form id along with the emoticon name.

liam1412 · January 14, 2007

hey, Nice one mate. That works spot on.

Cheers

franklyn · January 14, 2007

glad i could be of service mate.

liam1412 · January 14, 2007

Okay that working now. But it will only go at the end and not where the cursor is. Do you know a fix for this at all or is it not possible with this method.

Thanks

franklyn · January 14, 2007

try going through this
http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/

liam1412 · January 14, 2007

Your an absolute Geeeeeeeeeeeeenious. Cheers again Mate.

;D

liam1412 · January 14, 2007

I still can't get thi sto work. Can you show me whic bits I need to change and exactly how it shoudl be written. I am using the following

[code]<script type="text/javascript">

function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == ‘0′) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
</script>[/code]

and then

[code]<td width="30" bgcolor="#565656"><img src="images/smilies/smile.gif" onCLick="imagesinsertAtCursor(edit_post.html.edit_form.edit_area, ‘::smile::’");></td>[/code]

Sorry I really am shocking with Javascript. PHP comes easy to me but for some reason I just can't get the grasp of Javascript.

franklyn · January 14, 2007

here check this out . it took me a while to figure out how it works
[code]
<html>
<head>
<script type="text/javascript">
function AddEmo(tag)
{
var emo=document.forms["frm1"].elements["post"];
if (document.selection)
{
emo.focus();
var sel = document.selection.createRange();
sel.text = tag
}
else if (emo.selectionStart || emo.selectionStart == '0')
{

var startPos = emo.selectionStart
var endPos = emo.selectionEnd
emo.value = emo.value.substring(0, startPos)
+ tag
+ emo.value.substring(endPos, emo.value.length)
}
else {
emo.value += tag;
}
}
// calling the function
</script>
</head>
<body>
<form method="post" name="frm1" id="frm1">
<img src="http://franklyn.ifastnet.com/News/emoticons/smile.png" onclick="AddEmo('::smile')">
<input type="text" name="post" id="post">
</form>
</body>
</html>
[/code]

liam1412 · January 14, 2007

No really I think your a genious. Cheers for taking so much time out to help me. All working now.

Cheers again!!!!!!

franklyn · January 15, 2007

hehe thanks i actually made something like this quite recently for my news posting system.it works fine but i just cant seem to get the div to show html tags in IE :'( http://franklyn.ifastnet.com/News/News.html
feel free to test it. leave me a message lol.

liam1412 · January 15, 2007

Its me again. I know im probably really pushing my luck here but have you any idea if this function can be adapted to wrap around tags ie place [b] [/b] in fromt of and at the end of highlighted text. If you can point me in the direction of where to look for this i will try and work it out.

Thanks

franklyn · January 15, 2007

well i did a fair amount of gooigling and coding and this is what i came up with. it only works in IE for now FF doesn't have support for selections within textareas.
[code]
<html>
<head>
<script type="text/javascript">
function AddEmo(tag)
{
var emo=document.forms["frm1"].elements["post"];
if (document.selection)
{
emo.focus();
var sel = document.selection.createRange();
sel.text = tag
}
else if (emo.selectionStart || emo.selectionStart == '0')
{

var startPos = emo.selectionStart
var endPos = emo.selectionEnd
emo.value = emo.value.substring(0, startPos)
+ tag
+ emo.value.substring(endPos, emo.value.length)
}
else {
emo.value += tag;
}
}
function AddTag(tag)
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();

}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
var stri1 = txt
var stri = "[tag]"+stri1+"[/tag]"

AddEmo(stri);
}
// calling the function
</script>
</head>
<body>
<form method="post" name="frm1" id="frm1">
<img src="http://franklyn.ifastnet.com/News/emoticons/smile.png" onclick="AddEmo('::smile::')">
<img src="http://musicbrainz.org/images/mblookup-tag.gif" onclick="AddTag('[img]')">
<br>
<textarea name="post" id="post">
</textarea>
</form>
</body>
</html>
[/code]

liam1412 · January 16, 2007

Legendary.

Again thanks a lot for your help. I suppose I really shoul dlearn Javascript but I just can't seem to grasp it at all. it doesn't make any sense to me at all. Cheers again and if there is anything I can do in return just let me know..

Liam

liam1412 · January 17, 2007

Me again mate.

Im sorry to be a complete pain and I know you have already gone above and beyond but i can't seem to get the add tag bit to work. The image comes up but when I click it i doesn't put anything in the text area. Cheers

liam1412 · January 17, 2007

My Mistake. All working now.

You deserve a mention somewhere on my site. Not related to coding or owt but I think i will put javascript thanks to franklyn in there coz you don't give me that much help for nowt. let me know some link details etc and i'll get it added in for you.

Ta

liam1412 · January 17, 2007

Look Im really sorry to bug you on this one again but I have added the code as you suggested.

Everything works fine except it is not picking up the tag variable

ie

The line in my code reads

[code]<img src="images/smilies/link.jpg" onclick="AddTag('[url]')"> &nbsp[/code]

Now unless im mistaken this should print

[url][/url] into the txt box.

What it is actually printing is

[tag][/tag]

DO I need to make a different function for every different type of tag I use.

Thanks

franklyn · January 17, 2007

ah sorry about that i sort of hardcoded the tag into the function just replace this line
[code]var stri = "[tag]"+stri1+"[/tag]"[/code]
with
[code]var stri = "["+tag+"]"+stri1+"[/"+tag+"]"[/code]

liam1412 · January 17, 2007

Nic one again.

let me know a link I can attribute the source to.

Sign In

Can anyone help me with my clickable smilie buttons

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information