Instant smilies&vb code hack !

Hello,

Wondring how to add the "instant smilies" and "instant vb code" in my forums when the user is posting a new topic?
Like in "OpenTopic" from infopop.com

Any help is appreciated :)

You don't need a "hack" for this. You can do this in your templates. Simply edit the templates for the different forms and add javascript to add the different codes and smilies into the message when clicked on.

Thanks wluke :)

would you mind tel me what javascript code should I use?
I am not that good in javascripts !

Thanks again

Ok,I got the javascript for that

If I wanna add the script to the template "newthread" under the options.I need to add buttons and php code of course !
How can I do this without missing up my forums?

Any help is greatfull

Just stick it right in there and see what happens really. Backup the template to be safe and it something goes wrong, restore the backed up template right away.

Care to post the Javascript for the rest of us ? :)

Have you had any luck getting it working yet ?

Ok,here is what I did:

First,I created a small table where I want my buttons and smili faces to be in the template "newthread",then,I added this javascript in the table:

<a href="javascript: x()" onClick="DoSmilie(' :!) ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="smile"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!( ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="frown"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!o ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="redface"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!D ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="biggrin"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' ;!) ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="wink"></a>
<br>
<a href="javascript: x()" onClick="DoSmilie(' :!p ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="tongue"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!cool: ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="cool"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!rolleyes: ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="rollyeyes"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!mad: ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="mad"></a>
?
<a href="javascript: x()" onClick="DoSmilie(' :!eek: ');"><img width="15" height="15" src="YourSmilieURLHere" border="0" alt="eek"></a>
<br>
<a href="javascript: x()" onClick="DoSmilie(' :!confused: ');"><img width="15" height="22" src="YourSmilieURLHere" border="0" alt="confused"></a>
?
</TD><TD valign="top" align="right"><a href="javascript: x()" onClick="DoPrompt('url');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Add URL"></a>
?
<a href="javascript: x()" onClick="DoPrompt('email');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Add e-mail address"></a>
<br>
<a href="javascript: x()" onClick="DoPrompt('bold');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Bold"></a>
?
<a href="javascript: x()" onClick="DoPrompt('italics');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Italic"></a>
<br>
<a href="javascript: x()" onClick="DoPrompt('quote');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Quote"></a>
?
<a href="javascript: x()" onClick="DoPrompt('code');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Code"></a>
<br>
<a href="javascript: x()" onClick="DoPrompt('liststart');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="list_start"></a>
?
<a href="javascript: x()" onClick="DoPrompt('listitem');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="list_items"></a>
<br>
<a href="javascript: x()" onClick="DoPrompt('listend');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="list_end"></a>
?
<a href="javascript: x()" onClick="DoPrompt('image');"><img src="YourButtonURLHere" width="75" height="20" border="0" alt="Add image"></a>

--------
NOTE: please take the exclamation marks off from the tags above
---------

Then added this javascript at the top of the template right after the </title> tag :


<script language="JavaScript"><!--

function x () {
return;
}

function DoSmilie(addSmilie) {

var addSmilie;
var revisedMessage;
var currentMessage = document.REPLIER.MESSAGE_BODY.value;
revisedMessage = currentMessage+addSmilie;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

function DoPrompt(action) {
var revisedMessage;
var currentMessage = document.REPLIER.MESSAGE_BODY.value;


if (action == "url") {
var thisURL = prompt("Type Full URL", "http://");
var thisTitle = prompt("Type a word to present the URL", "web page");
var urlvBCode = ""+thisTitle+" (+thisURL+)";
revisedMessage = currentMessage+urlvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "email") {
var thisEmail = prompt("Type Full e-maill address", "");
var emailvBCode = ""+thisEmail+"";
revisedMessage = currentMessage+emailvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "bold") {
var thisBold = prompt("Type the text you want it Bold", "");
var boldvBCode = ""+thisBold+"";
revisedMessage = currentMessage+boldvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "italics") {
var thisItal = prompt("Type the text you want it Italic", "");
var italvBCode = ""+thisItal+"";
revisedMessage = currentMessage+italvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "image") {
var thisImage = prompt("Type the Full URL for your image", "http://");
var imagevBCode = "[IMG!]"+thisImage+"[/IMG!]";
revisedMessage = currentMessage+imagevBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "quote") {
var quotevBCode = "[QUOTE!] [/QUOTE!]";
revisedMessage = currentMessage+quotevBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "code") {
var codevBCode = "[CODE!] [/CODE!]";
revisedMessage = currentMessage+codevBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "liststart") {
var liststartvBCode = "[LIST!]";
revisedMessage = currentMessage+liststartvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

if (action == "listend") {
var listendvBCode = "[/LIST!]";
revisedMessage = currentMessage+listendvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}
if (action == "listitem") {
var thisItem = prompt("Type the "list_items" here and make sure you close the code with"list_end"", "");
var itemvBCode = " "+thisItem;
revisedMessage = currentMessage+itemvBCode;
document.REPLIER.MESSAGE_BODY.value=revisedMessage ;
document.REPLIER.MESSAGE_BODY.focus();
return;
}

}
//--></script>
-------------
NOTE: please take off the exclamation marks from the tags above !
-------------

Everything went fine so far.However,when I clicked on the smili face or any of the buttons it give me this script error :
----------------
Internet Explorer Script Error
-------------------------
An error has occurred in the script on this page.

Error: 'document.REPLIER.MESSAGE_BODY'is not an object
-----------------
How can I get rid of this now?? :(

Does some one have a url where I can see this.

Thanks,
Brian

Has anyone got this up and running yet ?

Thanks for sharing it MrBlunt,

The javascript links gave me an error though !!
---------------
Windows Scripting Host - Script Execution Error

Description: Syntax error
-------------

What do I have to do with those files?!!

Thanks again :)

I like the part on the URL JavaScript Prompt, it asks you what URL you would like to link to... "For Instance, if you are linking to the URL of infopop, you might use the title Infopop Homepage" :)

Seriously tho, i really like what you did, good work!

Excellent work! Thanks guys - i'm sure our visitors will love this :) I've added it to our site already :)

OK, i've run into a problem - maybe it's just that i've been sat in front of this damned PC for the past 18 hours... ? :)

I have had this running just fine, then I decided to add some more smilies - larger ones, but I run into a problem in that no matter what I do, the damned thing doesn't want to know when I put the larger ones in the system and it throws a wobbly! :( Anyone see what i've done wrong (the new additions are the last two..)


<A HREF="javascript: x()" onClick="AddSmilie(' :D ');"><IMG SRC="images/smilies/biggrin.gif" width=15 height=15 BORDER="0" ALT="Big Grin"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :) ');"><IMG SRC="images/smilies/smile.gif" width=15 height=15 width=15 height=15 BORDER="0" ALT="Smile"></A>
<A HREF="javascript: x()" onClick="AddSmilie(' ;) ');"><IMG SRC="images/smilies/wink.gif" width=15 height=15 BORDER="0" ALT="Wink"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :( ');"><IMG SRC="images/smilies/frown.gif" width=15 height=15 BORDER="0" ALT="Frown"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :o ');"><IMG SRC="images/smilies/redface.gif" width=15 height=15 BORDER="0" ALT="Embarrasment"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :p ');"><IMG SRC="images/smilies/tongue.gif" width=15 height=15 BORDER="0" ALT="Stick Out Tongue"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :eek: ');"><IMG SRC="images/smilies/eek.gif" width=15 height=15 BORDER="0" ALT="Eek!"></A>
<A HREF="javascript: x()" onClick="AddSmilie(' :cool: ');"><IMG SRC="images/smilies/cool.gif" width=15 height=15 BORDER="0" ALT="Cool"></A>
<A HREF="javascript: x()" onClick="AddSmilie(' :mad: ');"><IMG SRC="images/smilies/mad.gif" width=15 height=15 BORDER="0" ALT="Mad"></A>
<A HREF="javascript: x()" onClick="AddSmilie(' :rotate: ');"><IMG SRC="images/smilies/rotate.gif" width=15 height=15 BORDER="0" ALT="Rotate"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :laugh: ');"><IMG SRC="images/smilies/laugh.gif" width=15 height=15 BORDER="0" ALT="Laugh"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :rolleyes: ');"><IMG SRC="images/smilies/rolleyes.gif" width=15 height=15 BORDER="0" ALT="Roll Eyes (sarcastic)"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :dunce: ');"><IMG SRC="images/smilies/dunce.gif" width=15 height=26 BORDER="0" ALT="Dunce"></A>?
<A HREF="javascript: x()" onClick="AddSmilie(' :angel: ');"><IMG SRC="images/smilies/angel.gif" width=42 height=23 BORDER="0" ALT="Angel"></A>?

That's what I thought...

Anyway, with the last two smilies on the above list:

http://www.ten-tenths.com/forum/newpost.html

Without:

http://www.ten-tenths.com/forum/newthread.php?action=newthread&forumid=1

All help appreciated... :)

Yep - tried removing the brackets. Also tried moving the offending images to the head of the list - both without success. Bit of a mystery, isn't it ?

I just did that again, and uploaded a copy of the results to:

http://www.ten-tenths.com/forum/newpost1.html

Thanks, Mr B, but that didn't work either :( I copied the code directly from the file linked above, and the same result occurs :( Weird how it works on your site though!

Looks like i'm stuck without those smilies then... :(

Right! After some amount of trial and error, I realised my mistake... it wasn't the fault of the Javascript at all.

One of the first things that I did when I installed vBulletin was to go through and add the width and height attributes to all the image tags. All smilies were set to 15 pixels x 15 pixels by hardcoding it into the relevant template. Now, in order to add larger smilies, I made use of the replacement variables section. This allowed me to add the smilies - with the width and height attributes.

This worked fine - until now. Obviously, when the system does the replacements, it is now replacing the :dunce: in the Javascript with the replacement text specified elsewhere.

So, as I saiid above, it looks like i'm stuck without these larger smilies :( That is, unless John sees fit to modify the smilies table in the database in the next release so that it includes width and height attributes...

Sorry for wasting your time, Mr B, and thanks for the help...