Smilyes Template

#1 / Jan 05, 2008 7:48pm
Bdesign
23 posts
Hello all. I lately tried to to show the smilyes in the comment template. But it didn’t worked. First I tried to put the javascript code in the header :
```

```
and the smilyes ee code above the comment form:
```
{exp:emoticon columns="4"}
<tr class="row">
<td class="red"><div>{smiley}</div></td>
</tr>
{/exp:emoticon}
```
But it didn’t work. When I click on the icon, the smile isn’t added to the textarea.
Next I tried to embed the smilyes template in the comment template, but the same result. Does anybody know what am I missing? I think I have to make some modifications to the JavaScript, but I don’t have any know knowledge of this kind.
Thank you.

#2 / Jan 05, 2008 8:08pm

tbritton

714 posts

The link to the smilies template is what goes in the comments form:


 a href="{path=weblog/smileys}" onclick="window.open(this.href, '_blank', 'width=400,height=440');return false;" onkeypress="this.onclick()">Smileys</a

(I had to remove the opening and closing left/right arrows to get the code to display. Put them back after pasting, and replace weblog/smileys with your actual template group and template.)

The smilies template itself may have to be updated perhaps with working code (mine had broken code originally)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{lang}" lang="{lang}">
<head>
<meta http-equiv="content-type" content="text/html; charset={charset}" />
<title>Smileys</title>

<style type="text/css">

body {
 background-color: #ffffff;
 margin-left: 40px;
 margin-right: 40px;
 margin-top: 30px;
 font-size: 11px;
 font-family: verdana,trebuchet,sans-serif;
}
a:link {
 color: #990000;
 font-size: 11px;
 font-weight: normal;
 text-decoration: underline;
}
a:visited {
 color: #990000;
 font-size: 11px;
 font-weight: normal;
 text-decoration: underline;
}
a:active {
 color: #990000;
 font-size: 11px;
 font-weight: normal;
 text-decoration: underline;
}
a:hover {
 color: #990000;
 font-size: 11px;
 font-weight: normal;
 text-decoration: none;
}

</style>

<!--

function add_smiley(smiley)
{
opener.document.getElementById('comment_form').comment.value += " " + smiley + " ";
window.close();
opener.window.document.getElementById('comment_form').comment.focus();
}
//-->



</head>
<body>

Click on an image to add it to your comment

<table border="0" width="100%" cellpadding="6" cellspacing="1">

{exp:emoticon columns="4"}
<tr>
<td><div>{smiley}</div></td>
</tr>
{/exp:emoticon}

</table>

</body>
</html>

Hope that helps!

Terry

#3 / Jan 05, 2008 8:12pm

Bdesign
23 posts

I tried but still nothing. Thanks for your fast reply.
#4 / Jan 05, 2008 8:16pm

tbritton
714 posts

I tried but still nothing. Thanks for your fast reply.

Just updated the post - didn’t show link. Be sure to enclose with <> what I typed there. href tags just disappear when entered in posts for some reason.

Be sure to replace “weblog/Smileys” with your actual template group and smileys template.

Be sure to clean all that extra code out of your comment template header and body - it all belonged in the smiley template’s header and body.

Terry

#5 / Jan 05, 2008 8:46pm

Bdesign

23 posts

I think I didn’t explained well what I’m trying to achieve . I have this sample of the comment template:


<label for="textinput">Name: </label>

<input type="text" name="name" value="{name}" class="textinput" />


<label for="textinput">E-mail:</label>

<input type="text" name="email" value="{email}" class="textinput" />


<label for="textinput">Location:</label>

<input type="text" name="location" value="{location}" class="textinput" />


<label for="textinput">Web Site:</label>

<input type="text" name="url" value="{url}" class="textinput" />


<textarea name="comment" class="textarea">{comment}</textarea>

And I try to show the smileys above it, in the same template:

{exp:emoticon columns="4"}
<tr>
<td><div>{smiley}</div></td>
</tr>
{/exp:emoticon}

<label for="textinput">Name: </label>

<input type="text" name="name" value="{name}" class="textinput" />


<label for="textinput">E-mail:</label>

<input type="text" name="email" value="{email}" class="textinput" />


<label for="textinput">Location:</label>

<input type="text" name="location" value="{location}" class="textinput" />


<label for="textinput">Web Site:</label>

<input type="text" name="url" value="{url}" class="textinput" />


<textarea name="comment" class="textarea">{comment}</textarea>

I added the JavaScript in the header, but it simply doesn’t work.

#6 / Jan 05, 2008 8:54pm

tbritton
714 posts

First try to get the old fashioned way to work with the pop-up window like the code I gave you does.

Try doing an {embed=weblog/smileys} as well. Maybe you can keep the popup from happening, but in the other code, closing the window is what triggers the javascript to insert the image.

Off to work! Good luck with this!

Terry
#7 / Jan 06, 2008 2:05pm
Bdesign
23 posts
With a little help from a good friend i’ve made it :D . I had to modify the JavaScript code from the header, so it won’t call a popup window:
```
function add_smiley(smiley)
{
document.getElementById('comment_form').comment.value += " " + smiley + " ";
document.getElementById('comment_form').comment.focus();
}
```
#8 / Jan 06, 2008 2:32pm

tbritton
714 posts

Great! Thanks a lot! This is a very nice feature to have!

Terry

Thread

Bdesign

tbritton

Bdesign

tbritton

Bdesign

tbritton

Bdesign

tbritton

Username

Password

Thread