Click to See Complete Forum and Search --> : Help With Smilies
I need help. I have this textbox with a send button and a iframe and I have these smilies on my page and I need it so when you click one of the smiles it will insert that code for that smilie into the textbox so the user dosn't have to type the code for that smilie thereself. So it would kinda be like this forum so when you click on a smilie it inserts somthing like this: : ) and when you hit send it would post that to the iframe. I already have the iframe and posting part finished as you can see if you go to http://kd7pyo.infinitypages.com/chatter/chatterbox.html . Here is what I have sofar. I know I need more than the code below to make it work. The code below is copied from this forums source. I think this will work for putting on the smile images but I need the piece that tells it to put the smile code in the textbox.
<a href="javascript:smilie(': )')"><img src="images/smilies/smile.gif" alt="smile" border="0"></a>
Any help would be greatly appriciated. Thanks. :D
Any help would be nice. :D
DaveSW
04-09-2003, 02:21 PM
Can you use the 'target' tag in there somewhere?? Well you did say 'any help would be nice' - regardless of how useless it is...
Lol
Dave
Thank you for your response but I think I'm gonna need more help than that. Thanks anyway. Can anybody else help me?
Sorry, I didn't see this post. Here's your code...
<html><head>
<script>
function smile(face){document.forms[0].area.value+=face;}
</script>
</head><body>
<form>
<a href="javascript:smilie(':)');"><img src="images/smile1.gif"></a><br><br>
<textarea name="area">
</textarea></form>
</body></html>
That work?
Sorry I did not get back to you but I went to my grandmothers house for the week and I havn't got to try your suggestion yet. :D
Nedals
04-12-2003, 12:33 AM
Hi again, mjdimick
So you found the first piece of code.. :D
<a href="javascript:smilie(': )')"><img src="images/smilies/smile.gif" alt="smile" border="0"></a>
Now you need to find the javascript code that contains the smilie() function. A little more tricky! :)
Here's how you go about it..
What you are looking for is external javascript file (.js) that contains the smilie() function. The easiest way to get that is to go the the 'reply' page (with that textarea box) and do a 'file::save-as' using IE (not Netscape). Once done you will end up with the HTML page plus an additional folder that contains supporting files. In that directory (folder) you should see all the external .js files and in one of those is the smilie() function.
I tryed saving the page and it did also download a file with the webpage files such as pictures and other files with that page but it did not download any js files. :(
Nedals
04-12-2003, 12:54 AM
Strange! I tried it and here's the .js file that turned up. And near the end is the smilie() function.
Ohh wait I found it. I see the code but do I have to use the hole js file or would I put that peice of code in a js file by its self? How would I make this work? Where would I put the js file?
Since it's a page with an IFrame, you'd have to use <script src="vbcode.js" language="JavaScript"></script> on both pages (Iframe and HTML page). Just try saving a new .js file with only the smilie() function in it, and see if it works. If it does, great! If it doesn't, use the original "vbcode" .js file instead. That should work.
Would I have to treat it as a javascript with the <javascript and > on the top and bottom or would I just put that in a file and name it somting like smilies.js ?
Just put it in a new file (smilies.js for example). And use <script src="smilies.js"></script> to put it in the page.
I'll give it a try and get back to you soon!
So my 'Smilies.js' file would look like this?
<script src="smilies.js">
function smilie(thesmilie) {
// inserts smilie text
document.vbform.message.value += thesmilie+" ";
document.vbform.message.focus();
}
</script>
Let me know if I'm wrong. Also what would I put on the chat page to link the images so when you click on one of the smilies it would insert the : ) into the textbox?
That looks perfect.
<a href="javascript:smilies(': )')"><img src="smile.gif"></a>
Its not working. Here take a look. Try clicking on the crying smilie.
http://kd7pyo.infinitypages.com/chatter/chatterbox.html
See if you can figure out whats wrong. :(
You didn't put the <script src="smilies.js"></script> part in there. It can't find the function without the script!
Would that go in the head part of the page and is that the only thing I would need to put in there?
Try going to the link I gave you above so you can see how I updated it because its still not working. :(
You can't have the <script src="smilies.js"> part in there! It can only be code. It already knows it's a JS file, because the extension is .js. The code in .js:
function smilie(thesmilie) {
// inserts smilie text
document.vbform.message.value += thesmilie+" ";
document.vbform.message.focus();
}
WITHOUT the <script> part.
Thanks for sticking with me sofar. :D
Nedals
04-12-2003, 01:39 PM
You don't really need to create a external file for this application. Simply add the smilie() function in the 'chatterbox.html' page.
function smilie(thesmilie) {
// adds the smilie to the end of the message text
document.postform.message.value += thesmilie+" ";
document.postform.message.focus();
return false;
}
Do you understand what all this is all doing?
The link you found is added to each smilie.
<a href="#" onClick="return smilie(':)')">......</a>
Here's the textarea
<textarea name="message" class="textbox"></textarea>
When you click the link, it adds the 'passed-string' (thesmilie)
to the end of the text in the 'message' textarea which is contained in the form 'postform' (unless you changed the names)
MINI TUTORIAL
Use an external .js file when...
1. Your script will be used on multipule pages.
2. Your script is very long and you want to simplify your HTML page.
3. You want to hide your script to a VERY minor degree. Needs more than a simple 'right-click' to find the script.
Jona and I figured it out and it works now. He had to go so can you help me with this next question? I need it so the user can select the font they want to use from a drop down menu. Would they be able to see the font in the textarea where they type kinda like yahoo! where it changes the font of the textbox where they type to the font they selected from the drop down menu. :confused:
Any help would be greatly appriciated. Thankz. :D
I got all the smilies working now. Here is the link to the chat so you can see:
http://kd7pyo.infinitypages.com/chatter/chatterbox.html
But I still need help with the drop down menu part. Thanks.
I got it where you can insert smilies and change the font face and font size but still working on making it so you can make parts of the message in bold or italics or underlined. I was told it would be kinda complicated to make it so only certain parts of the message are fomated by selecting the style from a drop down menu. I will take even a script that will make the whole message formated. I want it so they can select which format they want to use form a drop down menu like the font type and font size is on my page right now. Any help would be greatly appriciated. :D
Heres the link:
http://kd7pyo.infinitypages.com/chatter/chatterbox.html