CODEWITHSUNDEEP
javascriptjqueryhtmlemoticons
Juli55
Juli55

Reputation: 43

emoticon, textarea with raw and textfield with replaced icon

I have an editable div and there it should replace emoticon-keys while typing. There is an hidden textarea also and there should be the raw data, but i dont't get how this should work. I use this library.
My jquery code:

         $('#acompose_message').keyup(function() {
                val = $('#acompose_message').html();
                document.getElementById('compose_message').innerHTML = val;
                emotifyVal = emotify(val);
                $('#acompose_message').html(emotifyVal);

        });

'#acompose_message' is the editable div and '#compose_message' is the hidden div

Upvotes: 2

Views: 4138

Answers (2)

Juli55
Juli55

Reputation: 43

Now I almost solved my problem : 

var emotifyText = function(e) {
            var caretPosition = getCaretPosition(this);
            var images = [];
            var i = 0;
            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#acompose_message').html(emotifyVal);
            $.each($('#acompose_message img'), function(index){
                console.log(i);
                $(this).replaceWith(function(){
                    return jQuery.inArray( $(this).attr('src'), jsonIcons );
                });
                i++;
            });

            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#compose_message').val(val);
            $('#acompose_message').html(emotify(val));
    };

but the line with $(this).replaceWith(function(){ does not work, now my Question is, does somebody knows how i can replace every img in my div with an other string?

Upvotes: 2

user4108694
user4108694

Reputation:

It seems that you are new to js. But this isn't our problem. You want to build a chatsystem with emoticons. Not a problem either. You jsut need to reconsider your approach.

  1. Insteed of using image emoticons in that phase, use ready-html emoticons. Take a look here Emoticons HTMl. They are ready emoticons that can be configure like a text. You can copy-paste and do all the other staff you do with letters. If you see every emoticon have a value (eg & #128512;) (Give a try now..copy and paste a emoticon. Oh here is one..😀 ) You can also specify color, font-size, etc values in css just like it was LETTERS (did i mention that ? ;)
  2. Now for the scripting part. With Ready-Html emoticons you need to reconsider your approach for JavaScript. Why don't you made first a select box to select your emoticons rather than convert text? Take a look in Google-Hangout and Facebook or Skype. They have a face-button which show you the faces. From that point all you need to do is click on the image you like (in your case Ready_Html emoticon) and will be placed in your text input. Then you can handle an on-enter event to send the message to the other client.

To sum up. Use Ready HTML emoticons like this:

<div style="color: red; font-size: 18px; font-family: sans-serif;">&#128512; </div>

The user can select an emoticon from a pop up button: here is an image example:

And here is a typical js code:

For the emoticon-button:

$('#emonicons').click(function() {
        if (emojis_isShown) {
            $('.spawn-emonicons').fadeOut(300);
            emojis_isShown = false;
        }
        else {
            $('.spawn-emonicons').fadeIn(300);
            emojis_isShown = true;
        }

});

For the actual icons:

$('.ico').click(function() {
        var value = $(this).text();
        var input = $('#message-sender');
        input.val(input.val() + value + ' ');

});

In the second code, when user press the icon he wants, the icons is transfered to input text with id message-sender. Now to handle on key press enter , which will send your message you can use the following pseudo function in JS.

 $('#message-sender').bind('keydown', function (event) {
         if(event.which === 13) {
            emojis_isShown = false;
            $('.spawn-emonicons').hide();
            var msg = $(this).val();
            var newdiv1 = '<div class="whatever">'+msg+'</div>'

               $( newdiv1 ).insertAfter( $( ".message" ).last());

         }
 });

The code above read all the keypresses and when key 13 (which is enter) is pressed then hide the emoticons window. create a new div with the message you typed and send it to front end. You should also consider to use Ajax to send the message to the 'other side' (Ops I mean client).

I'm deeply sorry if I couldn't help you more. The chatbox system is a taught task and not recommended to new programmers (Who said that???)

The last think I can give you is a tutorial I found on dreamincode.com about building a simple chat box. Start with that. With the time and as you become better programmer you will find the solutions you seek!

Tutorial (A really nice one) : Simple Text Chat Box

Upvotes: 2

Related Questions