Help - Search - Members - Calendar
Full Version: clickable smilies bar
Movable Type Community Forum > Additional Resources > Tips and Tricks
mutedgirl
Aug 22 2002, 01:16 PM
Okay, I added the that adds a smilie bar to the 'new entry/edit entry' screen (found here), and it works great!  I would love to add this to the bookmarklet screen as well, but when I tried changing the same things in the bm_entry.tmpl file, I get a JavaScript error.  I'm guessing that it has something to do with the code:

CODE
function insertSmilies (v) {
    document.forms[2].elements[6].focus();
    document.selection.createRange().text = v;
}


But I don't know enough about JavaScript and form interaction to fix it myself.  Should the 2 or the 6 be changed or something so that it works with the form on the bookmarklet screen, too?  If you can help, I'd really appreciate it! smile.gif
brainchild2b
Aug 22 2002, 10:46 PM
I can't even find the lines of code to add the smilies in the latest version of movabletype sad.gif
mutedgirl
Aug 23 2002, 04:49 AM
I'm not sure what you mean about the lines of code...which modification are you trying to add?

And I figured it out- I got it working on the bookmarklet screen by using the 'clickable smilies' mod for the comments screen smile.gif
Maggie
Aug 24 2002, 05:19 AM
Are you going to share with us how you did it mutedgirl?
mutedgirl
Aug 24 2002, 05:50 AM
I can't find where the mod was that I used, but all I did was add this to the header of the pages (comment listing template, bm_entry.tmpl, and edit_entry.tmpl)

CODE
<script language="JavaScript">
function commentEmoticon(code)
{
  var cache = document.comments_form.text.value;

  document.comments_form.text.value = cache + " " + code;
  document.comments_form.text.focus();
}
</script>


And then wherever I wanted the smilies to appear, I put something like this:

CODE
<img alt=":)" onclick="commentEmoticon(':)')" src="http://www.muted.com/logfiles/emoticons/happy.gif">
 <img alt=":(" onclick="commentEmoticon(':(')" src="http://www.muted.com/logfiles/emoticons/sad.gif">
 <img alt=";)" onclick="commentEmoticon(';)')" src="http://www.muted.com/logfiles/emoticons/playful.gif">
 <img alt=":D" onclick="commentEmoticon(':D')" src="http://www.muted.com/logfiles/emoticons/superhappy.gif">
 <img alt=":P" onclick="commentEmoticon(':P')" src="http://www.muted.com/logfiles/emoticons/goofy.gif">
 <img alt="gasp" onclick="commentEmoticon(':o')" src="http://www.muted.com/logfiles/emoticons/surprised.gif">
 <img alt="grr" onclick="commentEmoticon(':grr:')" src="http://www.muted.com/logfiles/emoticons/mad.gif">
 <img alt="sleepy" onclick="commentEmoticon(':yawn:')" src="http://www.muted.com/logfiles/emoticons/sleepy.gif">
 <img alt="devilish" onclick="commentEmoticon(':devilish:')" src="http://www.muted.com/logfiles/emoticons/devilish.gif">
 <img alt="hrm" onclick="commentEmoticon(':hrm:')" src="http://www.muted.com/logfiles/emoticons/perturbed.gif">
 <img alt="sick" onclick="commentEmoticon(':barf:')" src="http://www.muted.com/logfiles/emoticons/sick.gif">


Just make sure you name the forms on the bm_entry and edit_entry pages 'comments_form' so that it knows which form to add the smilies to! smile.gif  That all might not be explained very well, but I hope you get the idea...
mutedgirl
Aug 24 2002, 05:53 AM
I found it!  This is where I found the clickable smilies mod I used.
wxgal
Sep 13 2002, 05:59 AM
I've added the clickable smilies mod to my comments page without too much trouble...I have it working.  But on my post entry page, when I click to add the smilie, it puts it in the title field instead of where the cursor is. :0  I have no idea how to fix this.  Can anyone give me any ideas.  It would be greatly appreciated.  I used the mod found here.

Thanx,
Becky
Maggie
Sep 13 2002, 08:15 AM
Thank you mutedgirl  ;) .  Worked like a charm!!
wxgal
Sep 19 2002, 09:47 AM
I finally got the clickable smilies mood to work in my "create new post" screen.  I had to make a change in the code in edit_entry.tmpl

CODE
document.forms[2].elements[6].focus();


to

CODE
document.forms[2].elements["text"].focus();


in order for the focus to be in the text body area instead of the title area.  All it took was a little searching on the 'net to figure out what each piece of the code meant and a lot of hair pulling :0 to try to figure out what was wrong.
nyckid
Oct 1 2002, 03:44 PM
QUOTE
I found it!  This is where I found the clickable smilies mod I used.

I tried that but when i click on the smilies nothing happens?  I followed the instructions exactly too. Please help...
nyckid
Oct 2 2002, 10:19 AM
i just found out this code isn't compatible with mac platform, im using IE5.2.2 on Mac and it doesn't work when I click on the smilies.  But it works fine when browsing it with IE 6.0 on my PC.  

Someone got a working non platform independant hack for this smilies? I really like this one, but it won't work on a mac...
nammer
Oct 3 2002, 08:20 AM
Jennifer at scriptygoddess uses this method for adding smilies - it's very simple cut-and-paste, and doesn't require the scary hacking of your MT files.  I have both PC and Mac, and it works beautifully in all browsers - hope this helps!   biggrin.gif

Donna
raynebair
Nov 1 2002, 07:31 AM
CODE
document.forms[2].elements["text"].focus();
This code will only add smilies to the entry body. I want to add smilies to either the body or extended text depending where my focus is so I did this:

CODE
function addSmilie(str) {
       if (document.forms[2].elements["text"].focus()) {
               var cur = documents.forms[2].elements["text"].value;
               cur = cur + ' ' + str + ' ';
               document.forms[2].elements["text"].focus();
       } elseif (document.forms[2].elements["text_more"].focus()) {
               var cur = documents.forms[2].elements["text_more"].value;
               cur = cur + ' ' + str + ' ';
               document.forms[2].elements["text_more"].focus();
       }
}


but it doesn't work. I get an error: object expected. Is that not the way I check to see if an element has focus? If not how do I do it? I'm not very javascript skilled so this is a challenge for me.

Thanks.
raynebair
Nov 1 2002, 08:39 AM
I found a solution to this issue. I took some code from this thread: More Entry Edit Buttons, a few buttons I use all the time and worked it into the bm_entry.tmpl and edit_entry.tmpl files.

Here's what I did:
I added this code to the script tag at the top of the template (I put it just below the mtShortcuts function.
CODE
function addSmiley(str) {
       if (!document.selection) return;
       if (!window.last_elem) return;
       last_elem.caretPos.text = ' ' + str + ' ';
       last_elem.focus();
}

function saveCaret (elem) {
   if (!document.selection) return;
       if (elem.isTextEdit) elem.caretPos = document.selection.createRange();
       last_elem = elem;
}

function checkStr () {
       if( !document.selection ) return;
       before = document.selection.createRange();
       after = document.selection.createRange();
       before.moveStart( 'textedit', -1 );
       after.moveEnd( 'textedit', 1 );
       if( before.text.match(/<(b|i|u|a|p)(\s[^>]*)?>$/i) && !RegExp('^[^<]*<\/'+RegExp.$1+'>','i').exec(after.text) ) {
               var text = '</' + RegExp.$1 + '>';
               last_elem.caretPos.text = text;
               last_elem.caretPos.moveStart( 'character', -text.length );
               last_elem.caretPos.moveEnd( 'character', -text.length );
               last_elem.caretPos.select();
       }
}


Then modified the area that displays the formatting buttons to add my smilies. here's a sample:
CODE
document.write('<td width="20"><a href="javascript:addSmiley(\':\)\')"><img src="http://www.mysite.com/smilies/smile.gif" border="0" alt=":)" width="15" height="15" /></a></td>');
   document.write('<td width="20"><a href="javascript:addSmiley(\':\(\')"><img src="http://www.mysite.com/smilies/sad.gif" border="0" alt=":(" width="15" height="15" /></a></a></td>');
   document.write('<td width="20"><a href="javascript:addSmiley(\':D\')"><img src="http://www.mysite.com/smilies/biggrin.gif" border="0" alt=":D" width="15" height="15" /></a></td>');
   document.write('<td width="20"><a href="javascript:addSmiley(\':P\')"><img src="http://www.mysite.com/smilies/tongue.gif" border="0" alt=":P" width="15" height="15" /></a></td>');


then in the textarea tags for each body, extended text and excerpt, just after where you see wrap="virtual" I added this:
CODE
onselect="saveCaret(this)" onclick="saveCaret(this)" onkeyup="saveCaret(this);checkStr()"


In bm_entry, I moved the smilies to the same line as the Extended Text label since there wasn't enough room next to the other formatting buttons and the code looks slightly different as it isn't in the javascript format:
CODE
<td><a href="javascript:addSmiley(':\)')"><img src="http://www.mysite.com/smilies/smile.gif" border="0" alt=":)" width="15" height="15" /></a></td>
<td><a href="javascript:addSmiley(':\(')"><img src="http://www.mysite.com/smilies/sad.gif" border="0" alt=":(" width="15" height="15" /></a></td>
<td><a href="javascript:addSmiley(':D')"><img src="http://www.mysite.com/smilies/biggrin.gif" border="0" alt=":D" width="15" height="15" /></a></td>
<td><a href="javascript:addSmiley(':P')"><img src="http://www.mysite.com/smilies/tongue.gif" border="0" alt=":P" width="15" height="15" /></a></td>


You could also do as suggested in this thread and just add a table row below the textarea to add your smilies instead of having to adjust the row that has the section labels. Hope this helps everyone who wants to add a smilie bar to their entry forms.
Maggie
Nov 9 2002, 04:40 AM
I am trying to figure out how to add the smilie bar to MT-It.  I have already added it to the mt.cgi interface by following the tutorial at How to Add a Smilie Bar to Movable Type.  I have the smilies added to the bm_entry.tmpl but when you click on them I get an error at the bottom right of the window.  Here's what I added to the bm_entry.tmpl.
CODE
function insertSmilies (v) {
document.forms[2].elements[6].focus();
document.selection.createRange().text = v;
}

between  
CODE
function formatStr (v) {
   if (!document.selection) return;
   var str = document.selection.createRange().text;
   if (!str) return;
   document.selection.createRange().text = '<' + v + '>' + str + '</' + v + '>';}

and
CODE
function insertLink () {
   if (!document.selection) return;
   var str = document.selection.createRange().text;
   if (!str) return;
   var my_link = prompt('<MT_TRANS phrase="Enter URL:">', 'http://');
   if (my_link != null)
       document.selection.createRange().text = '<a href="' + my_link + '">' + str + '</a>';
}

and then of course I added the smilies
CODE
document.write('<td width="24"><a href="javascript:insertSmilies(\':puter\')"><img src="http://divamaggie.com/smilies/puter.gif" alt="puter" width="34" height="17" border="0"></a></td>');

between
CODE
<script language="javascript">
if (document.selection) {
   document.write('<table border="0" cellspacing="0" cellpadding="0" width="107">');
   document.write('<tr>');

and
CODE
document.write('<td width="24"><a href="javascript:formatStr(\'b\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
   document.write('<td width="24"><a href="javascript:formatStr(\'i\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
   document.write('<td width="24"><a href="javascript:formatStr(\'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
   document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
   document.write('</tr>');
   document.write('</table>');
} else {
   document.write(' ');
}
</script>

I'm hoping someone may be able to tell me what I have done wrong here  :0
kadyellebee
Nov 9 2002, 04:51 AM
What is the error you are getting?

Kristine
Maggie
Nov 9 2002, 04:56 AM
Hi Kristine  :)  When I click the smilie in the MT-It bookmarklet window, it doesn't go into the Entry Body, there is just that "Error on page" at the bottom right of the little browser window.
kadyellebee
Nov 9 2002, 05:36 AM
Are you on IE?  Can you double click the error and see what it tells you the problem is?  That would give you a line number of the error most likely, and then you could paste the source into an editor that numbers the lines or notepad and count down the lines - and that would be a spot to check your code in.

Kristine
Maggie
Nov 9 2002, 05:54 AM
Hi Kristine  smile.gif
I got
CODE
Line: 201
Char: 1
Error: 'document.forms.2.elements' is null or not an object
Code: 0
URL: http://divamaggie.com/mt.cgi?
is_bm=1&bm_show=trackback,category, allow_comments, allow_pings,convert_breaks,excerpt, text_more, keywords&__mode=View&_type=entry&link_title=movabletype.org%
20%3A%20Support%20Forum&link_href=http%
3A//www.movabletype.org/cgi-bin/ikonboard/ikonboard.cgi%3Fs%
3D3dccf6e62166ffff%3Bact%3DST%3Bf%3D14%3Bt%3D7092%3Bst%
3D15&text=

so I'm thinking it has something to do with
CODE
function insertSmilies (v) {
document.forms[2].elements[6].focus();
document.selection.createRange().text = v;
}
this but I don't know what  :0
kadyellebee
Nov 9 2002, 06:12 AM
Okay, now try reading through the beginning of this thread - I believe that it has the modification that's needed for it to work.

The date stamp on that file is April 10th, so there have been modifications to MT since then, assuming you've been upgraded since April smile.gif  

Kristine
mattb8
Nov 14 2002, 10:26 AM
I have been tring to get this to work for a while now and this is the error I get when I try to long in.
Got an error: syntax error at /home/heteroge/public_html/mt/lib/MT/Util.pm line 193, near "$str =~ s/\" Compilation failed in require at /home/heteroge/public_html/mt/lib/MT/App/CMS.pm line 12. BEGIN failed--compilation aborted at /home/heteroge/public_html/mt/lib/MT/App/CMS.pm line 12. Compilation failed in require at /home/heteroge/public_html/mt/mt.cgi line 21.
CODE
I was wondering does this work in 2.5 or not and if so maybe the code I added to Util.pm is not right.

this is it::

sub html_text_transform {
   my $str = shift;
   $str ||= '';
   $str =~ s/\:arrow/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_arrow.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:biggrin/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_biggrin.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:cool/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_cool.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:confused/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_confused.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:cry/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_cry.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:eek/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_eek.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:evil/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_evil.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:exclaim/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_exclaim.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:idea/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_idea.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:lol/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_lol.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:mad/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icom_mad.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:green/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_mrgreen.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:neutral/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_neutral.gif\" width=\"15\" height=\"15\" alt=\"\" \/>
   $str =~ s/\:question/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_question.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:razz/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_razz.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:red/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_redface.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:roll/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_rolleyes.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:sad/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_sad.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:smile/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_smile.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:surprised/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_surprised.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:twisted/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_twisted.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   $str =~ s/\:wink/<img src=\"http:\/\/www.heterogeneous.org\/smilies\/icon_wink.gif\" width=\"15\" height=\"15\" alt=\"\" \/>/g;
   my @paras = split /\r?\n\r?\n/, $str;
   for my $p (@paras) {
       $p =~ s!\r?\n!<br />\n!g;
       $p = "<p>$p</p>";
   }
   join "\n\n", @paras;
}


PLEASE HELP ME !!!!       sad.gif  :(
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.