A simple Javascript Smiley Face Insertion System

I put together this smiley face insertion system for my own personal use, and though maybe other people would like to use it, since it is very easy to install.

Here is how to use it:

Version Tested: 3.4.8a
File Modified: /include/form.php

1- Extract all the smiley images in the zip file into the "/smileys" directory of your phorum.

2- Replace the "/include/form.php" file of your current phorum directory with the "form.php" file in the zip file.

3- Go to your administrative interface, and go to "Plugins". There, click on the "Smiley Plugin" link to activate it.

4- Using the attached image, fill in the form fields for each smiley along with the corresponding image name and Add them.

That's it. I have also attached a snapshot of how the whole thing looks. Feel free to email me questions regarding this modifications.



regards
mt

Looks like the second zip file didn't go through correctly. Download it from this link:

[www.digioz.com]

The smiley images are also in:

[www.digioz.com]



And Here is what you have to do in the Smiley Plugin interface:





Post Edited (07-02-04 23:57)

regards
mt

really nice work!!!!
and easy to modify!

check my website!: [universalmetal.free.fr]

an option to have clickable link would be nice!

Thanks !! I actually added a few more features including image insertion and a clickable link/regular link to it. Here is the new javascript code that goes in the form.php file right before the form tag:

<!-- Smiley Face Modifications Start Here -->

<script language="JavaScript" type="text/javascript">
function emoticon(text) {
var txtarea = document.post.body;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function bbcode(text) {
var txtarea = document.post.body;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function linkInsert() {
var txtarea = document.post.body;
link=prompt('Enter link here:',"["];);
text = '[&]';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function imgInsert() {
var txtarea = document.post.body;
link=prompt('Enter image link:',"["];);
text = '';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function hyperInsert() {
var txtarea = document.post.body;
link=prompt('Enter image link:',"["];);
txtlablel = prompt('Enter text lable:', "Link Name");
text = '[url=' + link + ']' + txtlablel + '[/url]';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

</script>

<!-- Smiley List Starts Here -->

<table width="100" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td><a href="javascript:emoticon(':D')"><img src="smileys/icon_biggrin.gif" border="0" alt=":D" title="Very Happy"></a></td>
<td><a href="javascript:emoticon(':)')"><img src="smileys/icon_smile.gif" border="0" alt=":)" title="Smile"></a></td>
<td><a href="javascript:emoticon(':(')"><img src="smileys/icon_sad.gif" border="0" alt=":(" title="Sad"></a></td>
<td><a href="javascript:emoticon(':o')"><img src="smileys/icon_surprised.gif" border="0" alt=":o" title="Surprised"></a></td>
<td><a href="javascript:emoticon(':shock:')"><img src="smileys/icon_eek.gif" border="0" alt=":shock:" title="Shocked"></a></td>
<td><a href="javascript:emoticon(':?')"><img src="smileys/icon_confused.gif" border="0" alt=":?" title="Confused"></a></td>
<td><a href="javascript:emoticon('8)')"><img src="smileys/icon_cool.gif" border="0" alt="8)" title="Cool"></a></td>
<td><a href="javascript:emoticon(':lol:')"><img src="smileys/icon_lol.gif" border="0" alt=":lol:" title="Laughing"></a></td>
<td><a href="javascript:emoticon(':x')"><img src="smileys/icon_mad.gif" border="0" alt=":x" title="Mad"></a></td>
<td><a href="javascript:emoticon(':P')"><img src="smileys/icon_razz.gif" border="0" alt=":P" title="Razz"></a></td>
<td><a href="javascript:emoticon(':red:')"><img src="smileys/icon_redface.gif" border="0" alt=":red:" title="Embarassed"></a></td>
<td><a href="javascript:emoticon(':cry:')"><img src="smileys/icon_cry.gif" border="0" alt=":cry:" title="Crying"></a></td>
<td><a href="javascript:emoticon(':evil:')"><img src="smileys/icon_evil.gif" border="0" alt=":evil:" title="Evil or Very Mad"></a></td>
<td><a href="javascript:emoticon(':twisted:')"><img src="smileys/icon_twisted.gif" border="0" alt=":twisted:" title="Twisted Evil"></a></td>
<td><a href="javascript:emoticon(':roll:')"><img src="smileys/icon_rolleyes.gif" border="0" alt=":roll:" title="Rolling Eyes"></a></td>
<td><a href="javascript:emoticon(':wink:')"><img src="smileys/icon_wink.gif" border="0" alt=":wink:" title="Wink"></a></td>
<td><a href="javascript:emoticon(':!:')"><img src="smileys/icon_exclaim.gif" border="0" alt=":!:" title="Exclamation"></a></td>
<td><a href="javascript:emoticon(':q')"><img src="smileys/icon_question.gif" border="0" alt=":q" title="Question"></a></td>
<td><a href="javascript:emoticon(':idea:')"><img src="smileys/icon_idea.gif" border="0" alt=":idea:" title="Idea"></a></td>
<td><a href="javascript:emoticon(':arrow:')"><img src="smileys/icon_arrow.gif" border="0" alt=":arrow:" title="Arrow"></a></td>
</tr>
</table>

<table width="100" border="0" cellspacing="0" cellpadding="5">
<tr align="center" valign="middle">
<td><input type="button" class="button" value="Bold" style="font-weight:bold; width: 50px" onClick="javascript:bbcode('[b] [/b]')"></td>
<td><input type="button" class="button" value="Underline" style="font-weight:bold; width: 80px" onClick="javascript:bbcode('[u] [/u]')"></td>
<td><input type="button" class="button" value="Italic" style="font-weight:bold; width: 50px" onClick="javascript:bbcode('[i] [/i]')"></td>
<td><input type="button" class="button" value="Center" style="font-weight:bold; width: 70px" onClick="javascript:bbcode('[center] [/center]')"></td>
<td><input type="button" class="button" value="URL" style="font-weight:bold; width: 70px" onClick="javascript:linkInsert()"></td>
<td><input type="button" class="button" value="Image" style="font-weight:bold; width: 70px" onClick="javascript:imgInsert()"></td>
<td><input type="button" class="button" value="Hyperlink" style="font-weight:bold; width: 70px" onClick="javascript:hyperInsert()"></td>
</tr>
</table>
<!-- Smiley List Stops Here -->



regards
mt