Clickable Smilies 
in Nw54-Forums
Click-Smilies From Pop-up
and iFrame
• The easy way
Just use Mr.Pip's Smiley-Generator to create a script for your icons.
Then paste it to your forum Header
Please click Here to Mr. Pip's Smiley-Code-Generator.
For those who have no clue how to use JavaScript with their Network54 forum
I'll try to explain that page.
• You first have to create a Network54 'Realm'.
That's just a virtual webspace where you can upload, store and maintain your pictures.
If you don't know how to do that I'd suggest a quick view to
Mr. WordSmith's: Network54 Help Pages
Name your Realm (those names are Unique in Net54, try to find a name which isn't in use by others yet..
I guess just 'Smilies' won't work). ;)
(If you have a folder with gif-files elsewhere in internet you can use it of course, too.
Personally I found the page-load much faster with integrated network54 features.)
Just a note: Don't use anyboody else' grahics by direct linking to them.
You'd steal that person's bandwidth, you know. Else if the owner changes anything your icons will be lost, too. So, best to use your own webspace at Network54.
• Upload the smilies (format GIF or JPG, JPEG, PNG) from your pc to your Realm,
make sure their names doesn't include signs like this: -
Copy the URL (that's the 'adress' of your smiley, starts with http://....)
To be found by right-click the icon, Properties, highlight and copy the URI, paste it to the Generator.
Or easier and a lot click-safing:
Open two browser windows, one to the left with the Realm in Edit Files-mode and to the right Mr.Pip's generator. Then click the icon, drag and drop it to the other window in a free generator-slot.
• Back to Mr.Pips page.
You can paste (or drop) your Gif-URL to that first slot.
Just highlight that first 'blind' example and paste your own URL.
There's space for some 40 Icons.
• Push Create button and Select to highlight the script,
copy that code and paste it to your forum (the Edit/Options area/HEADER or FOOTER) wherever you would like to have it appear on the page.
Note: don't be too surprised you cannot find the smilies at the first gaze, they will only appear at your Post/Reply page and nothing elsewhere but there.
Voilá. Now you have click-able smilies which will be inserted to your message. :-)
How it could look like you can see here in this site's top or at the: Smilies Example-Forum.
(I've used a slightly different script for that special use)
• Part 2. FYI: How does that JS code work?
Let's have a look at it:
<script language="Javascript">
<!-- This and other Network54.com Scripts found at http://mrpip.orcon.net.nz/nw54/nwscripts.html
if (location.href.indexOf("post") != -1){
document.write('Emoticons<br />')
document.write('<img src="http://network54.com/Realm/Rat_Smilies/kuh.gif" border="0" style="cursor:hand;" onclick="Emoticons(this.src)" /> ')
}
function Emoticons(thisimage){if(document.getElementById("textEdit")!=null){setFocus();doFormat("InsertImage",thisimage)}
else{if(document.forms[0].message.type=="hidden"){alert("Unable to edit message in \"Preview Mode\"!")}
else{document.forms[0].message.value += thisimage + " ";}}
}
// -->
</script>
The first line <script language="JavaScript"> is telling your browser about the used 'pc-language' JS (JavaScript)
This line <!-- // http://mrpip.orcon.net.nz/nw54/nwscripts.html -->
includes in this case the creator of the code.
if (location.href.indexOf ("post") != -1){
commands to show the smilies solely on your 'post/response-page.
style=cursor:pointer;
is a simple CSS command to change your cursor into a 'hand' symbol upon the smiley-graphic.
document.write('Emoticons<br>')
simply puts the word "Emoticons" infront of your smilies.
You have the choice to change it to another word. Just as you like.
<br> breaks the line.
Now we're coming to the Smilies itself
document.write(' ...
is telling your browser where to put the image and
onclick="Emoticons(this.src)"which and why.
"Rat_Smilies/kuh.gif" -for example -
stands for the Realm- and file-name of one of my smilies.
function Emoticons(thisimage){if(document.....
The Funktion combines the Object-Commands (document.write...)
and another if which will tell a poster in a short
message that he cannot edit his message in Preview-mode
'If' not the Preview page than ( else ) Postpage where to
execute the function.
Update (April 2004)
We lately discovered a problem using the Emoticons-script if the WYSIWYG-Editor
(to be checked in your Network54 Profile-settings) is involved.
As we (Phil and I) didn't use this Network54 feature till this point we haven't been aware of any problem.
But then Phil took a deep look to this and found a solution.
Finally he changed the script and added another IF-command, and... it works now.
Thanks to the awsome programmer Phil!
{if(document.getElementById("textEdit")!=null){setFocus();doFormat("InsertImage",thisimage)}
this is to allow clickSmilies although you've the WYSIWYG-Editor turned on.
} concludes the if, else and function
</script> concludes the script.
These tags <!-- --> are hiding the script from elder browsers
Update (January 2005)
Mac (The other one) found a solution to hide smilies (and formats) from 'Preview' page:Move the format-script from the Header to the Footer, and replace:
if (location.href.indexOf("post") != -1){
with this:
if ( window.largepopupwindowopen || window.TBCancelEvent ){
. Now.. enjoy your forum with Click-Smilies. greetz ...
1/2004 © Ed Home/BilgeRat