Clicking on Smiley Makes Code show up on MSG board 1

xstranded · Oct 27, 2003

hi Again everyone... i wanna say thanks to everyone who helped me before on my first question. but yet again i have another one...

on my website, i have a Tag Board, and i have Smilies for it also... right now for you to put the smiley in your MSG you either have to type the code, or copy and paste. is there a way so that a user can simply click on the smiley and make it pop up in the "comment box"??

And Again Thank You Very Much

\\||//::xstranded
======its the bind between art and soul
//||\\and the union of body and sound
<::>

http://www.dubbls.com/stranded

theboyhope · Oct 27, 2003

Are you looking for something like this?

Code:

<script type=&quot;text/javascript&quot;>

function addSmiley() {

	area = document.getElementById( &quot;test&quot; );
	area.value += &quot;:o)&quot;;
}

</script>

<textarea id=&quot;test&quot;>Test. </textarea>

<a onclick=&quot;addSmiley();&quot;>Add Smiley</a>

HTH.

xstranded · Oct 27, 2003

your solution is SOOOO CLOSE man... alright the only problem that i'm coming across is the

area.value += "";

when i put a value in this field it will use only that value for every link. so let's say i want a Wink Smiley, and i put the value

area.value += "

";

then in the object i put the
<a onclick="addSmiley();">Wink</a>

instead of getting a Wink, i'll get a BIG GRIN smile, because of the

area.value += "";

is there a way to make the onclick="..." equal what each smiliey is... if anyone wants, check out my site below, click on "shoutkast" and take a look. the first alien head is the one to just click... it works, but i have to put a Defined Value in the area.value, and i dont want to, i want it to be whatever smiley the user clicks on...

i've been trying to figure it out, been drivin me kinda looney... hehe thanks for the help again

\\||//::xstranded
======its the bind between art and soul
//||\\and the union of body and sound
<::>

http://www.dubbls.com/stranded

theboyhope · Oct 27, 2003

Just pass the smiley code to the function.

Like this:

Code:

<script type=&quot;text/javascript&quot;>

function addSmiley( code ) {

    area = document.getElementById( &quot;test&quot; );
    area.value += code;
}

</script>

<textarea id=&quot;test&quot;>Test. </textarea>

<a onclick=&quot;addSmiley( ':frog:' );&quot;>Frog</a>
<a onclick=&quot;addSmiley( ':toad:' );&quot;>Toad</a>

clarkin · Oct 27, 2003

How about storing the textual value (eg '

' ) of each smiley in the img's alt tag. The extra bonus of this is folks with images off get the correct text representation of the smiley

Try this out:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<title>Test Bed</title>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function addSmiley(imgTag) {
    var area = document.getElementById( &quot;test&quot; );
    area.value += imgTag.alt;
}
</script>
</head>
<body>
<form name=&quot;myForm&quot; onsubmit=&quot;return false;&quot;>
<img src=&quot;imgs/smiley.gif&quot; alt=&quot;:)&quot; onclick=&quot;addSmiley(this);&quot;>
<img src=&quot;imgs/elvis.gif&quot; alt=&quot;2:]&quot; onclick=&quot;addSmiley(this);&quot;>
<textarea id=&quot;test&quot; name=&quot;myText&quot; rows=&quot;4&quot; cols=&quot;60&quot;></textarea>
</form>
</body>
</html>

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

xstranded · Oct 27, 2003

this is being a real pain in the a$$... i can't seem to get it to work. i'll show you just the top part of my HTML. i mean it's how you have it... but the whole self define thing isnt working. i have no clue on what to do... i believe this is a lost cause...

<html>
<head>
<title>ShoutKast</title>
<link rel="stylesheet" href="shoutkast.css">
<SCRIPT>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=170,height=300');&quot

;
}

</SCRIPT>
<script language="JavaScript" type="text/javascript">
function addSmiley(imgTag) {
var area = document.getElementById( "comment" );
area.value += imgTag.alt;
}
</script>

</head>
<body>
<div align="right"><br>
<a class="head">Shoutkast</a><br>
<br>
</div>
<div style="position: absolute; left: 3; top: 100">
<table width="290" height="218" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><form action="sign.php" method="GET" target="tags">
<div id="Layer1" style="border-width: 1 1 1 1; border-color: #C5DBF2; border-style: solid; width: 218;">
<iframe src="tags.php?show=limit" name="tags" width="290" height="130" frameborder="0" ></iframe>
</div>
<input type="text" size="25" name="name" value="name" class="input" maxlength="15"><br>
<input type="text" size="25" name="website" value="

http://"

class="input"><br>
<input type="text" size="25" name="comment" value="comment" class="input" maxlength="150" id="comment"><br>
<input type="submit" value=" shout " class="button"> <a href="tags.php?show=all" onclick="popUp(this.href);return false;">a</a> | x | <a href="admin.php" target="blank">.</a>
</form>
</td>
</tr>
</table>
</div>
<div style="position: absolute; left: 300; top: 70;" align="center">
<table width="91" height="248" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
<tr valign="middle">
<td><div align="center"><img src="smilies/alien1.gif" alt=":a" onclick="addSmiley( ":a&quot

;" width="15" height="15"></div></td>
<td><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">:a</font></div></td>
</tr>
<tr align="center" valign="middle">
<td><a onclick="addSmiley( ';a' );"><img src="smilies/alien2.gif" width="15" height="15"></a></td>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">;a</font></td>
</tr>

now when i click on the second smiley face... i get a "undefined" in my comment box. i know why that shows up, because i have it a different way then the ALT way. but i can't get either one to work... if you guys think i should stop trying to figure out.. let me know, my head will hurt less... thanks again

\\||//::xstranded
======its the bind between art and soul
//||\\and the union of body and sound
<::>

http://www.dubbls.com/stranded

byam · Oct 27, 2003

the image tag should be like this:

<img src="smilies/alien1.gif" alt=":a" onclick="addSmiley(this);" width="15" height="15">

just replace the smiley characters argument in addSimley() by addSimely(this) in all smiley image tag.

clarkin · Oct 27, 2003

You've mixed up your img tags. If you are using an alt tag as the text to be added, and my function to add what's in the alt tag into the comment, then you need to get your img tags the way I showed in my example.

So
[tt]<a onclick="addSmiley( ';a' );">[/tt]
- Won't work because the addSmiley() is looking for a reference to an <img> tag object
And
[tt]<img src="smilies/alien1.gif" alt=":a" onclick="addSmiley( ":a&quot

;" width="15" height="15">[/tt]
Will break twice over, once because like above there is no reference to the img tag (the this in my example), and twice because you're mixing "s with more "s within themselves, you need to escape them \" or use ' single quotes for the inner set.

Both of these img tags should be like:
[tt]
<img src="smilies/alien1.gif" alt=":a" onclick="addSmiley( this);" width="15" height="15">
[/tt]
if you want to use the version of addSmiley() you posted in your code example.

Hope that clears things up.

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

xstranded · Oct 28, 2003

ALRIGHT !!!! hehehe, fixed it

i have to apoligize for being so illiterate, i didnt realize
alt=":a" onclick="addSmiley( this);"

that the "this" had to stay there

but now it works. Thank you All very much for sticking with me and helping me. i really do appreciate it. i hope i can help you guys out with anything.

-Nguyen

\\||//::xstranded
======its the bind between art and soul
//||\\and the union of body and sound
<::>

http://www.dubbls.com/stranded

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Clicking on Smiley Makes Code show up on MSG board 1

xstranded

Technical User

theboyhope

IS-IT--Management

xstranded

Technical User

theboyhope

IS-IT--Management

clarkin

Programmer

xstranded

Technical User

byam

Programmer

clarkin

Programmer

xstranded

Technical User

Similar threads

Part and Inventory Search

Sponsor