Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2005
    Location
    Wasilla, Alaska
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    textarea smilie input help

    Ok, here it is, I am horrible at javascript, and this may have been solved before on here but I couldn't find the answer mainly because I dont even know what to call it lol.

    What I want to do is have a little popup window when you click a 'Add Smiley' link on my site and whatever image they click on, it will insert the smiley code into the main textarea at the current cursor position.

    Ive already got a working submit script (PHP) and smiley page (HTML). The smiley page currently just shows the images along with the code, and they either have to copy/paste the code or manually type it in. I would like to make things easier by enabling a click and be done method.

    this is in profile.php
    Code:
    <textarea name='message' rows='5' cols='55'></textarea>
    smilies_popup.html
    Code:
    <html>
    <head>
    <title>Smilies for Broken Saintz comments</title>
    <link rel="shortcut icon" href="http://brokensaintz.com/favicon.ico">
    </head>
    <body>
    Just copy and paste one of the following codes into your shout/comment box and it will show the corresponding smilie.
    <ul>
    <li><font color="red"><b>::bucktooth::</b></font> = <img src='images/bucktoothhappy.gif'>
    <li><font color="red"><b>::cooky::</b></font> = <img src='images/cooky.gif'>
    <li><font color="red"><b>::coolshades::</b></font> = <img src='images/coolshades.gif'>
    <li><font color="red"><b>::creepy::</b></font> = <img src='images/creepy.gif'>
    <li><font color="red"><b>::duh::</b></font> = <img src='images/duhhhhhh.gif'>
    <li><font color="red"><b>::evilgrin::</b></font> = <img src='images/evilgrin.gif'>
    <li><font color="red"><b>::evilhappy::</b></font> = <img src='images/evilhappy.gif'>
    <li><font color="red"><b>::excitedgrin::</b></font> = <img src='images/excitedgrin.gif'>
    <li><font color="red"><b>::eyeonu::</b></font> = <img src='images/eyeonu.gif'>
    <li><font color="red"><b>::forcedsilence::</b></font> = <img src='images/forcedsilence.gif'>
    <li><font color="red"><b>::freakout::</b></font> = <img src='images/freakout.gif'>
    <li><font color="red"><b>::grumpy::</b></font> = <img src='images/grumpy.gif'>
    <li><font color="red"><b>::halfsmile::</b></font> = <img src='images/halfsmile.gif'>
    <li><font color="red"><b>::happy::</b></font> = <img src='images/happy.gif'>
    <li><font color="red"><b>::joy::</b></font> = <img src='images/happyeyesclosedmouthopen.gif'>
    <li><font color="red"><b>::toothy::</b></font> = <img src='images/happymissingtooth.gif'>
    <li><font color="red"><b>::happyhappy::</b></font> = <img src='images/happynormal.gif'>
    <li><font color="red"><b>::happytongue::</b></font> = <img src='images/happytounge.gif'>
    <li><font color="red"><b>::huh::</b></font> = <img src='images/huh.gif'>
    <li><font color="red"><b>::lmao::</b></font> = <img src='images/lmao.gif'>
    <li><font color="red"><b>::meltdown::</b></font> = <img src='images/meltdown.gif'>
    <li><font color="red"><b>::mischevious::</b></font> = <img src='images/mischievousgrin.gif'>
    <li><font color="red"><b>::nannynanny::</b></font> = <img src='images/nannynannybooboo.gif'>
    <li><font color="red"><b>::ooo::</b></font> = <img src='images/oooooo.gif'>
    <li><font color="red"><b>::outraged::</b></font> = <img src='images/outraged.gif'>
    <li><font color="red"><b>::puppyeyes::</b></font> = <img src='images/puppydogeyes.gif'>
    <li><font color="red"><b>::puppyeyessad::</b></font> = <img src='images/puppydogeyessad.gif'>
    <li><font color="red"><b>::raspberry::</b></font> = <img src='images/rasberry.gif'>
    <li><font color="red"><b>::reallysad::</b></font> = <img src='images/reallysad.gif'>
    <li><font color="red"><b>::sad::</b></font> = <img src='images/sad.gif'>
    <li><font color="red"><b>::scared::</b></font> = <img src='images/scared.gif'>
    <li><font color="red"><b>::sick::</b></font> = <img src='images/sick.gif'>
    <li><font color="red"><b>::silent::</b></font> = <img src='images/silent.gif'>
    <li><font color="red"><b>::skeptical::</b></font> = <img src='images/skeptical.gif'>
    <li><font color="red"><b>::smirk::</b></font> = <img src='images/smirk.gif'>
    <li><font color="red"><b>::spazzing::</b></font> = <img src='images/spazzing.gif'>
    <li><font color="red"><b>::superbeast::</b></font> = <img src='images/superbeast.gif'>
    <li><font color="red"><b>::tears::</b></font> = <img src='images/tears.gif'>
    <li><font color="red"><b>::thumbsup::</b></font> = <img src='images/thumbsup.gif'>
    <li><font color="red"><b>::timid::</b></font> = <img src='images/timid.gif'>
    <li><font color="red"><b>::tired::</b></font> = <img src='images/tired.gif'>
    <li><font color="red"><b>::whacko::</b></font> = <img src='images/wacko.gif'>
    <li><font color="red"><b>::wink::</b></font> = <img src='images/wink.gif'>
    </ul></body></html>
    the form itself doesnt have a name but if it needs one for the JS thing it can easily be done. I would really appreciate anyones help on this. Thanks in advance!!!

    -Mindless-
    trying to revive an old site...

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are a few ways to do this. Try this one for starters:

    Code:
    <ul>
      <li>
        <span onclick="document.form.message.innerHTML += '<img src="images/bucktoothhappy.gif">'
    '>
      <font color="red"><b>::bucktooth::</b></font> = <img src='images/bucktoothhappy.gif'>
        </span>
      <li>
    .....
    Several notes:
    1. If this doesn't work, then replace the phrase "innerHTML" above with "value".
    2. document.form.message assumes the containing form is named "form". Or, you could just give the textarea an ID of "thisIsItsId" and replace the above with onclick="document.getElementById.('thisIsItsId").innerHTML += ... (or with value, whichever works)
    3. I'm assuming that <font color="red"><b>::bucktooth::</b></font> is a description of the smiley, and <img src='images/bucktoothhappy.gif'> is the actual image for it?
    4. For proper aligning, you may need to play with what you add to the innerHTML or value above as in <img align="abscenter" src="images/bucktoothhappy.gif"> or something similar.

    Let me know if this works for you.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New Coder
    Join Date
    Feb 2005
    Location
    Wasilla, Alaska
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help, i currently have to head to work so ive got no time to try any of this yet, but when im home tonight i will definitely give all of this a shot. I'm not sure if it matter but the smilies are in a different window then the actual form itself. And yes, the font color=red is just for actual html formatting. the code i want to be inserted into the form is the ::bucktooth:: part, as i already have a php script that replaces all the bbcode to the actual html formatting.

    the form's name is 'comment_user'
    the textarea's name is 'message'

    also, i noticed phpbb has the script im looking for in their post page, but i messed around with it last night and couldnt get it to work. But it has a section of the script in it that I also want to use, and that is the insert at current cursor position in the form.

    When im done testing tonight i will let you know how things go. Thanks again.

    -Mindless-
    trying to revive an old site...

  • #4
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I don't know offhand how to add text where the cursor is, but if anything it will just be a small modification of this code. If your php script replaces bbcode, then all you really need to put in the onclick handler is

    Code:
    onclick="otherWindowName.document.comment_user.message.innerHTML += '::bucktooth::'"
    or whatever it is that your php code replaces with an image (I'm assuming the text "::bucktooth::" is it.
    You have to add the name of the other window where I did. Take a look at the other php code you said you located, though. It may work better than this one.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #5
    New Coder
    Join Date
    Feb 2005
    Location
    Wasilla, Alaska
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, i got the coding from phpBB to work, EXCEPT i need it to work in two different windows, below is the code i am using, please, if anyone can help me achieve this goal, it would help a lot.

    JavaScript in header.
    Code:
    <script type="text/javascript" language="Javascript">
    <!--
    
    /**
    * Insert emoticon
    */
    function smiley(text) 
    {
    	text = ' ' + text + ' ';
    
    	if (document.comment_user.message.createTextRange && document.comment_user.message.caretPos)
    	{
    		var caretPos = document.comment_user.message.caretPos;
    
    		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
    		document.comment_user.message.focus();
    	}
    	else
    	{
    		var selStart = document.comment_user.message.selectionStart;
    		var selEnd = document.comment_user.message.selectionEnd;
    
    		mozWrap(document.comment_user.message, text, '')
    		document.comment_user.message.focus();
    		document.comment_user.message.selectionStart = selStart + text.length;
    		document.comment_user.message.selectionEnd = selEnd + text.length;
    	}
    }
    
    /**
    * Insert at Claret position. Code from
    * http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
    */
    function storeCaret(textEl)
    {
    	if (textEl.createTextRange)
    	{
    		textEl.caretPos = document.selection.createRange().duplicate();
    	}
    }
    
    /**
    * From http://www.massless.org/mozedit/
    */
    function mozWrap(txtarea, open, close)
    {
    	var selLength = txtarea.textLength;
    	var selStart = txtarea.selectionStart;
    	var selEnd = txtarea.selectionEnd;
    	var scrollTop = txtarea.scrollTop;
    
    	if (selEnd == 1 || selEnd == 2) 
    	{
    		selEnd = selLength;
    	}
    
    	var s1 = (txtarea.value).substring(0,selStart);
    	var s2 = (txtarea.value).substring(selStart, selEnd)
    	var s3 = (txtarea.value).substring(selEnd, selLength);
    
    	txtarea.value = s1 + open + s2 + close + s3;
    	txtarea.selectionStart = selEnd + open.length + close.length;
    	txtarea.selectionEnd = txtarea.selectionStart;
    	txtarea.focus();
    	txtarea.scrollTop = scrollTop;
    
    	return;
    }
    -->
    </script>
    JavaScript In Link
    Code:
    <a href=\"javascript:smiley(':D')\"><img src='images/bucktoothhappy.gif' onclick=\"smiley(':D');return false\"></a>
    the link code will need to reside in smilies_popup.html
    the form is in profile.php

    i'm not sure if the main header JS needs to be in the smilies_popup.html or in the profile.php where the actual form is.

    the way i tested it was by sticking the js link and the main js both in the profile.php and it worked successfully.
    Last edited by Mindless; 12-23-2006 at 09:19 AM.
    trying to revive an old site...

  • #6
    New Coder
    Join Date
    Feb 2005
    Location
    Wasilla, Alaska
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ::bump:: anyone?
    trying to revive an old site...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •